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 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 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 mysql与mysqli事务使用说明 分享
2013/08/17 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
php与js的区别是什么
2013/08/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue中$nextTick的用法讲解
2019/01/17 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序以ssm做后台开发的实现示例
2020/04/08 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
python实现kMeans算法
2017/12/21 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
python tkinter控件布局项目实例
2019/11/04 Python
Python帮你识破双11的套路
2019/11/11 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
便利店的创业计划书
2014/01/15 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
家长对老师的感言
2014/03/11 职场文书
公司合作意向书范文
2014/07/30 职场文书
公司聚餐通知
2015/04/22 职场文书
单位更名证明
2015/06/18 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
解析Java中的static关键字
2021/06/14 Java/Android
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android