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跨域问题详解
Nov 25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
Feb 08 Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
AngularJS实现图片上传和预览功能的方法分析
Nov 08 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
vue项目前端错误收集之sentry教程详解
May 27 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
Mar 03 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 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 数据库字段复用的基本原理与示例
2011/07/22 PHP
php中++i 与 i++ 的区别
2012/08/08 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP文件操作详解
2016/12/30 PHP
用javascript操作xml
2006/11/04 Javascript
javascript 数组排序函数
2009/08/20 Javascript
Javascript 类型转换方法
2010/10/24 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
JavaScript简单编程实例学习
2020/02/14 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
你不知道的 TypeScript 高级类型(小结)
2020/08/28 Javascript
[01:35]辉夜杯战队访谈宣传片—LGD
2015/12/25 DOTA
Python学习资料
2007/02/08 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
大学活动策划书范文
2014/01/10 职场文书
小加工厂管理制度
2014/01/21 职场文书
优秀医生事迹材料
2014/02/12 职场文书
旅游管理毕业生自荐信范文
2014/03/19 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android