JavaScript原型继承之基础机制分析


Posted in Javascript onAugust 26, 2011

这一语言功能的本质依赖于 JavaScript 特有的原型链(prototype chain)模式。
所以严格意义上说,JavaScript 是基于原型的面向对象语言。也就是说,每个实例对象都具有一个原型。对象从该原型中继承属性和方法。

1、构造函数

利用构造函数,可以简单地创建对象。构造函数内的 this 关键字指向实例对象本身:

function People(name){ 
this.name = name; 
}

使用 new 运算符和构造函数创建实例对象:
var people = new People('小明'); 
console.log(people.name); //小明

但如果创建了两个实例,这两个实例之间无法直接共享属性和方法:
var people1 = new People('小明'); 
var people2 = new People('小王'); 
people1.sex = 'male'; 
console.log(people2.sex); //undefined

也就是说对象一旦被实例化,其属性方法都独立存在,对某个属性的修改不会影响到其他实例。

2、Prototype

于是就有了 prototype 属性,这个属性是在生成实例对象时自动创建的。它本身又是一个对象,拥有能够在实例间共享的属性和方法。而实例本身的属性和方法,则包含在构造函数中。换句话说,构造函数内部的属性和方法,在经过实例化后都成为了本地的属性和方法,而原型(prototype)中的属性和方法在实例中只是一种引用,因此能够被多个实例共享。

还是刚才那个构造函数,现在为它增加 prototype 属性:

People.prototype.sex = 'female'; 
//或者写成 People.prototype = {sex: 'female'}; 
console.log(people1.sex); //male 
console.log(people2.sex); //female

People 构造函数的 prototype 属性参数会直接影响到 people1 和 people2 两个实例。

但为什么 people1.sex 输出 male 呢?这是由于在 JavaScript 中,原型关系以递归形式存在。对象的原型也是一个对象,而原型的本身也可能具有一个原型。原型的最高层级是全局的 Object 对象。

这就是说,一旦 people1.sex 被设置为 male 后,它在原型中对应的值就无法被暴露出来。假如 people1.sex 本身没有值,才会从构造函数的 prototype 属性中读取,以此类推一级一级向上查找,直到 Object 对象。

注:使用 “null” 给对象赋值,可以销毁自定义对象,释放内存资源。

Javascript 相关文章推荐
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
jQuery表格行上移下移和置顶的实现方法
Oct 08 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
jQuery滚动插件scrollable.js用法分析
May 25 jQuery
vue.js声明式渲染和条件与循环基础知识
Jul 31 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
May 05 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
自己动手开发jQuery插件教程
Aug 25 #Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 #Javascript
基于JQuery的Select选择框的华丽变身
Aug 23 #Javascript
MooTools 页面滚动浮动层智能定位实现代码
Aug 23 #Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 #Javascript
jQuery页面滚动浮动层智能定位实例代码
Aug 23 #Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 #Javascript
You might like
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
节点的插入之append()和appendTo()的用法介绍
2014/01/13 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python中turtle作图示例
2017/11/15 Python
Python温度转换实例分析
2018/01/17 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
最好的商品表达自己:Cafepress
2019/09/04 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
项目申请汇报材料
2014/08/16 职场文书
拆迁委托协议书
2014/09/15 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
Mysql分库分表之后主键处理的几种方法
2022/02/15 MySQL
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS