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 Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
JS倒计时代码汇总
Nov 25 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
vue实现移动端input上传视频、音频
Aug 18 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 中的批处理的实现
2007/06/14 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
JavaScript中URL编码函数代码
2011/01/11 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
canvas轨迹回放功能实现
2017/12/20 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
vue打开新窗口并实现传参的图文实例
2021/03/04 Vue.js
Python完全新手教程
2007/02/08 Python
Python中实现常量(Const)功能
2015/01/28 Python
python中global用法实例分析
2015/04/30 Python
Python简单格式化时间的方法【strftime函数】
2016/09/18 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
详解Python发送email的三种方式
2018/10/18 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
精灵市场:Pixie Market
2019/06/18 全球购物
经理秘书岗位职责
2013/11/14 职场文书
大学毕业感言200字
2014/03/09 职场文书
品牌宣传方案
2014/03/21 职场文书
报案材料怎么写
2015/05/25 职场文书
无工作证明怎么写
2015/06/15 职场文书
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python