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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
jQuery aminate方法定位到页面具体位置
Dec 26 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
javascript框架设计读书笔记之数组的扩展与修复
Dec 02 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 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面向对象全攻略 (三)特殊的引用“$this”的使用
2009/09/30 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
在网页中使用document.write时遭遇的奇怪问题
2010/08/24 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
js 将线性数据转为树形的示例代码
2019/05/28 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python切换pip安装源的方法详解
2016/11/18 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
python中pika模块问题的深入探究
2018/10/13 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
保送生自荐信范文
2013/10/06 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
三八妇女节演讲稿
2014/05/27 职场文书
会计专业自荐信
2014/06/03 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
连锁超市项目计划书
2014/09/15 职场文书
2014年语文教学工作总结
2014/12/17 职场文书