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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
script不刷新页面的联动前后代码
Sep 18 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php生成二维码
2015/08/10 PHP
PHP面向对象编程之深入理解方法重载与方法覆盖(多态)
2015/12/24 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
PHP中单例模式的使用场景与使用方法讲解
2019/03/18 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
详细介绍8款超实用JavaScript框架
2013/10/25 Javascript
js中reverse函数的用法详解
2013/12/26 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
2016/02/06 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
详解python3中zipfile模块用法
2018/06/18 Python
Python函数和模块的使用总结
2019/05/20 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
新郎新娘婚礼答谢词
2014/01/11 职场文书
求职信需要的五点内容
2014/02/01 职场文书
幼儿园教师工作感言
2014/02/15 职场文书
快递员岗位职责
2014/09/12 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android