理解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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
Vue js with语句原理及用法解析
Sep 03 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+memcache实现消息队列案例分享
2014/05/21 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php swoft框架实例用法
2020/12/22 PHP
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
在Vue组件中使用 TypeScript的方法
2018/02/28 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python魔术方法详解
2015/02/14 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
对python中的装包与解包实例详解
2019/08/24 Python
pyqt5 QlistView列表显示的实现示例
2020/03/24 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
2014全年工作总结
2014/11/27 职场文书
2014年语文教研组工作总结
2014/12/06 职场文书
经典导游欢迎词
2015/01/26 职场文书
领导新年致辞2016
2015/07/29 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
MySQL时区造成时差问题
2022/04/13 MySQL