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+PHP星级评分实现方法
Oct 02 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
详解JavaScript中return的用法
May 08 Javascript
使用D3.js制作图表详解
Aug 13 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
自己动手开发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学习之PHP表达式
2006/10/09 PHP
防止用户利用PHP代码DOS造成用光网络带宽
2011/03/01 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JavaScript使用cookie
2007/02/02 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
Vue中render方法的使用详解
2018/01/26 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue实现直播间点赞飘心效果的示例代码
2019/09/20 Javascript
列举Python中吸引人的一些特性
2015/04/09 Python
简单实现python爬虫功能
2015/12/31 Python
Python数据类型学习笔记
2016/01/13 Python
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python射线法判断检测点是否位于区域外接矩形内
2019/06/28 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
华为慧通笔试题
2016/04/22 面试题
什么是View State?
2013/01/27 面试题
公司庆典活动邀请函
2014/01/09 职场文书
工作违纪检讨书
2014/02/17 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
导游词之镇江焦山
2019/11/21 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
MySQL创建管理子分区
2022/04/13 MySQL