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实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
Aug 27 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
详解Vue demo实现商品列表的展示
May 07 Javascript
vue实现分页栏效果
Jun 28 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
vue实现图片上传功能
May 28 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脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP5.4起内置web服务器使用方法
2016/08/09 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Yii框架小部件(Widgets)用法实例详解
2020/05/15 PHP
JS 实现双色表格实现代码
2009/11/24 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python与Redis的连接教程
2015/04/22 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
Python如何执行系统命令
2020/09/23 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
总账会计岗位职责
2014/03/13 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
Django框架中模型的用法
2022/06/10 Python