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 相关文章推荐
验证码按回车不变解决方法
Mar 29 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
微信小程序学习之数据处理详解
Jul 05 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
Oct 29 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 表单数据的获取代码
2009/03/10 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
Tinymce+jQuery.Validation使用产生的BUG
2010/03/29 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
jQuery中slideUp()方法用法分析
2014/12/24 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
Python使用MD5加密字符串示例
2014/08/22 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
CentOS安装pillow报错的解决方法
2016/01/27 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python实现动态创建类的方法分析
2019/06/25 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python和Bash结合在一起的方法
2020/11/13 Python
网络教育自我鉴定
2013/11/01 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android