理解javascript中的原型和原型链

 更新时间:2015年07月30日 09:20:58   作者:放牛娃也有春天  
这篇文章介绍了javascript中的原型和原型链,需要的朋友可以参考下

原型

  大家都知道,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
 
);

  我们可以看到,每个对象都是含有一个__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 this详细介绍

    javascript this详细介绍

    这篇文章主要介绍了javascript this详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • javascript数组详解

    javascript数组详解

    数组对象用来在单独的变量名中存储一系列的值。我们使用关键词 new 来创建数组对象。有两种向数组赋值的方法,也可以使用一个整数自变量来控制数组的容量
    2014-10-10
  • Javascript全局变量var与不var的区别深入解析

    Javascript全局变量var与不var的区别深入解析

    这篇文章主要介绍了Javascript全局变量var与不var的区别。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js实现鼠标拖拽缩放div实例代码

    js实现鼠标拖拽缩放div实例代码

    这篇文章主要介绍了js实现鼠标拖拽缩放div,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • js闭包引起的事件注册问题介绍

    js闭包引起的事件注册问题介绍

    下面小编就为大家带来一篇js闭包引起的事件注册问题介绍。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-03-03
  • Javascript冒泡排序算法详解

    Javascript冒泡排序算法详解

    这篇文章主要介绍了Javascript冒泡排序算法的相关资料,需要的朋友可以参考下
    2014-12-12
  • 浅谈JavaScript函数的四种存在形态

    浅谈JavaScript函数的四种存在形态

    下面小编就为大家带来一篇浅谈JavaScript函数的四种存在形态。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • Javascript技术栈中的四种依赖注入小结

    Javascript技术栈中的四种依赖注入小结

    本文总结了Javascript中常见的依赖注入方式,并以inversify.js为例,介绍了方言社区对于Javascript中DI框架的尝试和初步成果
    2016-02-02
  • JQueryDOM之样式操作

    JQueryDOM之样式操作

    这篇文章主要介绍了JQueryDOM之样式操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • javascript引用对象的方法

    javascript引用对象的方法

    javascript引用对象的方法...
    2007-01-01

最新评论