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 相关文章推荐
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
jQuery对象[0]是什么含义?
Jul 31 Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 11 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 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读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
从零开始学习jQuery (十) jQueryUI常用功能实战
2011/02/23 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js异常捕获方法介绍
2013/04/10 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
Bootstrap table表格简单操作
2017/02/07 Javascript
vue--点击当前增加class,其他删除class的方法
2018/09/15 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
2020/02/11 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
Vue 实现可视化拖拽页面编辑器
2021/02/01 Vue.js
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
python超简单解决约瑟夫环问题
2015/05/12 Python
Python读写Json涉及到中文的处理方法
2016/09/12 Python
Python使用defaultdict读取文件各列的方法
2017/05/11 Python
Python表示矩阵的方法分析
2017/05/26 Python
python 实现敏感词过滤的方法
2019/01/21 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
python调用win32接口进行截图的示例
2020/11/11 Python
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
天网工程实施方案
2014/03/26 职场文书
商场主管竞聘书
2014/03/31 职场文书
烟台的海导游词
2015/02/02 职场文书
财务工作个人总结
2015/02/27 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
早会开场白台词大全
2015/06/01 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis