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解密入门 最终变量劫持
Jun 25 Javascript
javascript 写类方式之九
Jul 05 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
Dec 27 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
Jan 01 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
ionic2中使用自动生成器的方法
Mar 04 Javascript
ES6中let 和 const 的新特性
Sep 03 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
微信小程序实现一张或多张图片上传(云开发)
Sep 25 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 操作调试的方法
2012/07/12 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
有关于eclipse配置spket需要注意的一些地方
2013/04/07 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
JS原生带缩略图的图片切换效果
2018/10/10 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python网络爬虫神器PyQuery的基本使用教程
2018/02/03 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
Python argparse模块使用方法解析
2020/02/20 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
Python之多进程与多线程的使用
2021/02/23 Python
使用CSS3来代替JS实现交互
2017/08/10 HTML / CSS
Falconeri美国官网:由羊绒和羊毛制成的针织服装
2018/04/08 全球购物
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
长青弘远的面试题
2012/06/09 面试题
大学班级计划书
2014/04/29 职场文书
体育专业自荐书
2014/05/29 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书