欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

javascript中原型链与原型链继承详解

程序员文章站 2024-03-13 10:39:39
...

前言        

        虽然很久以前就开始学习javascript了,但是关于原型链的知识开始接触使用,还是通过一年前的一个项目有了一定的了解,但是今天有个同事突然问我这个问题,讲了好久可能是自己理解的不够透彻,说来说去总觉得只可意会不可言传,于是乎就又查了查资料,为了看看自己真的懂了没现在,想总结下关于原型链继承等系列知识,欢迎各位路过的神仙们对我的内容批评指正。

储备知识点

        学习知识第一步一般都需要简单了解下所学东西大致是个啥,现在有可能云里雾里的,但是带着问题学习也有好处,那么我们就通过下面这张图简单介绍下本文的主角prototype和__proto__:

    javascript中原型链与原型链继承详解

--图片源自网络

通过new关键字理解prototype和__proto__

        在搞明白什么是原型链继承之前有一个关键字是有必要了解一下的,那就是new这个容易被忽略的关键字,如果你能回答上来new对象的过程中究竟做了些什么?这个问题的话那这一小节可以跳过,那么现在就来讲讲这个东西。

        下面将以var fun=new Function();为例简单的了解下new的过程中究竟干了个嘛?

new Function()={
var fun={};
fun.__proto__=Function.prototype;
var result=Function.call(fun);
return typeof result==='Function'?result:fun;
}

        不难看出其实在new对象时不是简单的返回一个对象,中间经历了核心的三步

        1.首先就是创建一个同名的空的fun对象;

        2.紧接着就是把Function上的prototype属性赋给fun对象的__proto__属性(这里不知道这个是什么没有关系就知道进行了这么一步,后面讲解prototype,__proto__时会详细介绍);

        3.使用fun替换Function的上下文context

通过三句话理解prototype和__proto__

1.proptotype和__proto__都是属性,但是只有函数对象才有prototype拥有prototype属性

2.任何对象的__proto__都指向它的构造函数的prototype

3.prototype属性指向原型对象因此也有自己的__proto__属性指向的是prototype的对象的构造函数的prototype属性

通过一张经典图理解prototype和__proto__

javascript中原型链与原型链继承详解
--图片源自网络
相关标签: __proto__ prototype