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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
div失去焦点事件实现思路
Apr 22 Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
vue移动端实现下拉刷新
Apr 22 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
Jul 14 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/09/24 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php使用正则表达式获取图片url的方法
2015/01/16 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
2013/04/19 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
在JavaScript中如何解决用execCommand(
2015/10/19 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
详解jQuery选择器
2016/12/21 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
PyMongo安装使用笔记
2015/04/27 Python
Python数据分析之双色球中蓝红球分析统计示例
2018/02/03 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
python爬取网易云音乐评论
2018/11/16 Python
python实现文件的备份流程详解
2019/06/18 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
网页美工求职信范文
2014/04/17 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2014年社区工作总结
2014/11/18 职场文书
JavaScript 原型与原型链详情
2021/11/02 Javascript