美文网首页
2019-05-29 原型和原型链

2019-05-29 原型和原型链

作者: 漫步的美人鱼 | 来源:发表于2019-05-29 20:00 被阅读0次

1、prototype

      prototype属性是每一个函数都具有的属性,但是不是一个对象都具有的属性。比如

 function F(){                                                         

}

var f = new F(); 

其中F中有prototype属性,而 f 没有。但是 f 中的隐含的__proto__属性指向F.prototype。

f.__proto__ === F.prototype

为什么会存在prototype属性?

Javascript里面所有的数据类型都是对象,为了使JavaScript实现面向对象的思想,就必须要能够实现‘继承’使所有的对象连接起来。而如何实现继承呢?通过new的方式来实现实例。

举个例子,child1,child2都是Mother的孩子,且是双胞胎。

function Mother(name){

       this.name = name;

       this.father = '张三';

}

var child1 = new Mother('妈妈');

var child2 = new Mother('妈妈');

如果有一天,发现孩子的父亲其实是李四,那么就要修改每一个孩子的father属性。

child1.father ='李四';

console.log(child2.father) // 张三

也就是说修改了其中一个孩子的father属性不会影响到下一个,属性的值无法共享。

正是这个原因才提出来prototype属性,把需要共享的属性放到构造函数也就是父类的实例中去。

2、__proto__

__proto__属性是每一个对象以及函数都隐含的一个属性。对于每一个含有__proto__属性,他所指向的是创建他的构造函数的prototype。原型链就是通过这个属性构件的。

想像一下,如果一个函数对象(也称为构造函数)a的prototype是另一个函数对象b构建出的实例,a的实例就可以通过__proto__与b的原型链起来。而b的原型其实就是Object的实例,所以a的实例对象,就可以通过原型链和object的prototype链接起来。

function a(){

}

function b(){

}

var b1 = new b();

a.prototype = b1;

var a1 = new a();

console.log(a1.__proto__===b1);//true

console.log(a1.__proto__.__proto__===b.prototype) //true

console.log(a1.__proto__.__proto__.__proto__===Object.prototype) //true

如果要理清原型和原型链的关系,首先要明确一下几个概念:

1.JS中函数也是对象, 而且是一种特殊的对象

2.JS中Object原型链的终点指向Object.prototype

3.JS对象都有一个隐藏的__proto__属性,他指向创建它的构造函数的原型,但是有一个例外,Object.prototype.__proto__指向的是null。

4.JS中构造函数和实例(对象)之间的微妙关系

构造函数通过定义prototype来约定其实例的规格, 再通过 new 来构造出实例,他们的作用就是生产对象.

function Foo(){ }

var foo = new Foo();

foo其实是通过Foo.prototype来生成实例的。

构造函数本身又是方法(Function)的实例, 因此也可以查到它的__proto__(原型链)

function Foo(){

}

等价于 var Foo= new Function();

而Function实际上是

function Function(){

}

也就是等价于

var Function = new Function();

所以说Function是通过自己创建出来的。正常情况下对象的__proto__是指向创建它的构造函数的prototype的.所以Function的__proto__指向的Function.prototype

Object 实际上也是通过Function创建出来的

typeof(Object) //function 所以,

function Object(){

} 等价于

var Object = new Function();

那么Object的__proto__指向的是Function.prototype,也即是

Object.__proto__ === Function.prototype //true

下面再来看Function.prototype的__proto__指向哪里

因为JS中所有的东西都是对象,那么,Function.prototype 也是对象,既然是对象,那么Function.prototype肯定是通过Object创建出来的,所以,

Function.prototype.__proto__ === Object.prototype //true

相关文章

  • JavaScript 原型、原型链与原型继承

    原型,原型链与原型继承 用自己的方式理解原型,原型链和原型继承 javascript——原型与原型链 JavaSc...

  • 关于原型原型链的理解

    什么是原型? 什么是原型链? 为什么需要原型,和原型链?

  • 【原型和原型链】什么是原型和原型链

    【原型和原型链】什么是原型和原型链https://blog.csdn.net/xiaoermingn/articl...

  • 2019-05-29 原型和原型链

    1、prototype prototype属性是每一个函数都具有的属性,但是不是一个对象都具有的属性。比如 ...

  • js原型链

    目录 1.对象的原型和原型链1.1什么是原型1.2查看原型1.3对象的原型链 2.使用构造函数2.1 函数的原型链...

  • 2-6 原型和原型链 - 5个原型规则

    2-6 原型和原型链 - 5个原型规则 5条原型规则,原型规则是学习原型链的基础。 第一、所有引用类型(数组、函数...

  • 深入javascript之原型和原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,并且原型和原型...

  • 原型、原型链

    (什么是原型、原型链?有什么作用) JavaScirpt深入之从原型到原型链 图解 Javascript 原型链 ...

  • JavaScript学习笔记(三)原型和原型链

    1. 原型和原型链 ECMAScript实现的是基于原型和原型链的继承。对于任何对象,都有一个__proto__属...

  • JS-进阶-Day3

    原型链: 原型链:是一种关系,实例对象和原型对象之间的 关系,关系是通过原型(proto)来联系的 原型指向可以改...

网友评论

      本文标题:2019-05-29 原型和原型链

      本文链接:https://www.haomeiwen.com/subject/mmlutctx.html