理解javascript中的原型和原型链


Posted in Javascript onJuly 30, 2015

原型

大家都知道,JavaScript 不包含传统的类继承模型,而是使用 prototype 原型模型。代码实现大概是这样子的

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

       Kimy本身是没有say方法的,当他在自己对象中找不到该方法时就回去他的原型中查找,也就是Student.prototype对象中查找。这里我们用到了一个构造函数Student

构造函数、__proto__以及原型链

除了IE浏览器,其他浏览器都在Object对象的实例上,部署了一个非标准的__proto__属性(前后各两个下划线),指向该对象的原型对象,即构造函数的prototype属性。

盗用一段代码和一张图

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

理解javascript中的原型和原型链

我们可以看到,每个对象都是含有一个__proto__属性,b的__proto__指向的构造b的构造方法Foo的prototype属性;而Foo.prototype也是一个对象,本身也有一个__proto__指向构造其的构造方法Object的prototype。Object.prototype的__proto__被指向了 null, 这就形成了一个原型链了。

这里还要能理解这样一段代码

Object instanceof Function
//true
Function instanceof Object
//true

new做了什么

这里还有一个小问题,js里面普通函数和构造函数形式上貌似没有啥太大区别(首字母大写不是必须的,但是通常都把构造函数的首字母大写)。new这个关键字到底做了什么东西。

比方

var Kimy = new Student(); 

new 做了三件事情

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1、定义了一个空对象

2、设置其原型

3、初始化对象

这样就能理解为什么Kimy.__proto__指向的是Student.prototype了(同一个引用),原来就是new在起着关键的作用!

以上就是本文的全部内容,希望大家能够喜欢。

Javascript 相关文章推荐
JS去除右边逗号的简单方法
Jul 03 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
jquery自适应布局的简单实例
May 28 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
VUE长按事件需求详解
Oct 18 Javascript
node 解析图片二维码的内容代码实例
Sep 11 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 #Javascript
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
You might like
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
删除无限分类并同时删除它下面的所有子分类的方法
2010/08/08 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
php实现批量压缩图片文件大小的脚本
2014/07/04 PHP
PHP制作万年历
2015/01/07 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
vue中 v-for循环的用法详解
2020/02/19 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
有趣的python小程序分享
2017/12/05 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python zip函数打包元素实例解析
2019/12/11 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
python实现学生管理系统开发
2020/07/24 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
投标服务承诺书
2014/05/28 职场文书
教师节晚会主持词
2015/06/30 职场文书
男方家长婚礼致辞
2015/07/27 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
react中的DOM操作实现
2021/06/30 Javascript
SQL Server使用导出向导功能
2022/04/08 SQL Server