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 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
JS幻灯片可循环播放可平滑旋转带滚动导航(自写)
Aug 05 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
Aug 09 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
javascript数组includes、reduce的基本使用
Jul 02 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
php include的妙用,实现路径加密
2008/07/29 PHP
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
js点击文本框后才加载验证码实例代码
2015/10/20 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
在Python中处理列表之reverse()方法的使用教程
2015/05/21 Python
python实现批量改文件名称的方法
2015/05/25 Python
django 常用orm操作详解
2017/09/13 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
Python实现Event回调机制的方法
2019/02/13 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python爬虫之遍历单个域名
2019/11/20 Python
如何使用python代码操作git代码
2020/02/29 Python
appium+python adb常用命令分享
2020/03/06 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
美国隐形眼镜销售网站:ContactsDirect
2017/10/28 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
DELPHI面试题研发笔试试卷
2015/11/08 面试题
合同意向书范本
2014/07/30 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
防暑降温通知书
2015/04/27 职场文书
道歉的话怎么说
2015/05/12 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis