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判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
JavaScript使用ZeroClipboard操作剪切板
May 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
Dec 13 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
JS实现的对象去重功能示例
Jun 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笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
解析php中两种缩放图片的函数,为图片添加水印
2013/06/14 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
2017/02/17 Javascript
Vue之Watcher源码解析(1)
2017/07/19 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
jQuery+koa2实现简单的Ajax请求的示例
2018/03/06 jQuery
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
用Vue编写抽象组件的方法
2019/05/06 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
paramiko模块安装和使用(远程登录服务器)
2014/01/27 Python
Python break语句详解
2014/03/11 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
pytorch实现查看当前学习率
2020/06/24 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
《从现在开始》教学反思
2014/04/15 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
社区工作者个人总结
2015/02/28 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书