理解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 相关文章推荐
wordpress之js库集合研究介绍
Aug 17 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
javascrip关于继承的小例子
May 10 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP实现函数内修改外部变量值的方法示例
2018/12/28 PHP
浅谈php://filter的妙用
2019/03/05 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
Swiper自定义分页器使用详解
2017/12/28 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
关于vue中watch检测到不到对象属性的变化的解决方法
2018/02/08 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python中表示字符串的三种方法
2017/09/06 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python匿名函数的使用方法解析
2019/10/10 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
函数指针的定义是什么
2016/08/14 面试题
小学生检讨书大全
2014/02/06 职场文书
会计人员岗位职责
2014/03/19 职场文书
保护环境建议书400字
2014/05/13 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
个人工作能力自我评价
2015/03/05 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Python字典的基础操作
2021/11/01 Python