理解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获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
学习vue.js条件渲染
Dec 03 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 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函数 serialize()和unserialize()
2012/02/04 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
详解 PHP加密解密字符串函数附源码下载
2015/12/18 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
python使用post提交数据到远程url的方法
2015/04/29 Python
Python编程入门的一些基本知识
2015/05/13 Python
Python跨文件全局变量的实现方法示例
2017/12/10 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python设置随机种子实例讲解
2019/09/12 Python
python3中datetime库,time库以及pandas中的时间函数区别与详解
2020/04/16 Python
python批量修改交换机密码的示例
2020/09/22 Python
python中reload重载实例用法
2020/12/15 Python
PHP经典面试题
2016/09/03 面试题
MIS软件工程师的面试题
2016/04/22 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
个人求职简历中英文自我评价
2013/12/16 职场文书
学校消防安全制度
2014/01/30 职场文书
打架检讨书300字
2014/02/02 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
SQL Server2019数据库之简单子查询的具有方法
2021/04/27 SQL Server