• 深入理解JavaScript系列:史上最清晰的JavaScript的原型讲解


      一说起JavaScript就要谈的几个问题,原型就是其中的一个。说了句大话,史上最清晰。本来是想按照大纲式的行文写一下,但写到后边感觉其实就一个概念,没有什么条理性,所以下面就简单按照概念解释的模式谈下这个问题。

    1.JavaScript的原型是什么?

      原型,首先他是个对象。和在以对象为核心的JavaScript这门语言中的其他普通对象来说一样,只不过他的角色有点特殊。但首先要明白他就是一个对象,是一个无序的属性和值的序列对。

    2.谁会具有原型这个对象?

      所有的对象(包括函数这个对象)在默认的情况下都有一个原型对象。这句话的理解就和普通对象中再嵌套拥有对象是一个意思。

      因为原型本身也是对象,所以每个原型自身又有一个原型对象(属性继承就是这么来的)。照这句话下去的话会成为一个无限继承的模式,所以一定会有一个结束点。所以例外来了,当对象原型追溯到原型链的最顶端的时候,这个最顶端的位置也就是在这种层层向上的关系到了Object这个构造函数的prototype,Object函数的的prototype对象如下图:

     

      从图中可以看到,Object的属性里已经没有了__proto__。至于什么是__proto__,下边会讲。

    3.__proto__和prototype分别是指什么?

      每一个对象都有一个__proto__对象属性,每一个函数(函数也是对象)都有一个 prototype对象属性,所以总结来说就是每一个对象有一个__proto__,而每一个函数都有一 个prototype,但同时他又是一个对象,所以函数也会有__proto__。

    4.__proto__和prototype的关系是怎么样的?

      首先明白对象是怎么来的?对象无非是构造函数构造出来的或者是字面直接量的形式。

      构造出来的对象的__proto__指向构造该对象的构造函数的prototype;字面直接量的对象的__proto__指向该对象类型所对应的的构造函数的prototype。 

      总结来说就是对象的__proto__指向该对象所对应的构造函数的prototype。

    5.不同函数的prototype分别是什么?

      其实这是两个问题,第一先回答不同函数。

      首先JavaScript中只要是函数,都可以用new关键字当作构造函数来使用。但是,有些函数是我们自己实现的,还有一些函数是JavaScript语言标准里已经规定内置实现的。这些函数包括Array、Boolean、Date、Number、String、RegExp、Math。这里会有一个问题就是Math他是一个对象而不是函数,你可以去typeof检测一下。除去Math之后剩余的这些内置构造函数的prototype属性也是语言内置实现的,比如Array里我们常用的那些pop、push、shift这些方法,都统统包括在Array这个构造函数的prototype对象属性里。除了上面提到的内置构造函数外,其余的函数都是我们自己定义的函数,他们也会有prototype属性,但是如果我们不显示的去给prototype赋值的话,他就是一个空对象。

      接下来回答第二个问题,prototype是什么。

      其实上面已经说的很清楚了,prototype是函数的一个固有属性,即只要是个函数都会有的属性,内置的构造函数已经有实现好的prototype,它里边包括各种方法或者属性。而我们自己实现的函数也必定会有一个prototype属性,但是如果我们不显示赋值的话,他就是一个空对象。

    6.那我们所说的原型和原型继承到底是什么意思?

      如果你一字不落的看完上边的所有概念而且能理解到80%以上,就应该很自然的得出这个问题的答案了。

      我们一般所说的原型就是对象的原型,对象的原型是指_proto_这个对象。而所有的对象的继承也是通过他来实现的。第4个问答中已经很明确了,__proto__指向该对象的构造函数的prototype,而该对象的构造函数的prototype作为对象会拥有一个__proto__,而这个__proto__又指向他的构造函数的prototype,层层向上,直到__proto__指向Object这个最顶端的函数对象的prototype,也就是第二条的图所示的便结束。

      如上便是JavaScript通过原型继承的一个解释。

    总结:我们该怎么掌握原型这个概念。

      掌握一个东西,无非也就是 是什么,怎么样,怎么用这三点。

      是什么。

      首先明白__proto__和prototype,对象都会有__proto__,包括函数对象,函数对象除了__proto__,还拥有prototype。

      原型是一个对象,指__proto__,每个对象都会拥有这个属性。__proto__指向该对象构造函数的prototype。__proto__的层层向上追溯的过程就是继承的过程,直到追溯到最顶端即Object这个构造函数的prototype。

      怎么样。

      怎么样也就是为什么的意思,原型之所以存在,是基于JavaScript这门语言的面向对象思想来说的。像其他语言都会有OO和继承等这些特性,JavaScript虽为脚本语言,灵活却不失功用,这个是他实现面向对象和继承的一个思想。可以简单的理解为此。

      怎么用。

      这个是个很大的话题,可以另开一篇文章来阐述。这里只是简单的举几个例子。

      如果仅仅只是因为为了给一个实例添加属性而使用原型是没有多大意义的,这和直接添加属性到这个实例是一样的,假如我们已经创建了一个实例对象 ,我们想要继承一个已经存在的对象的功能比如说Array,我们可以像下面这样做:

    var a = [1, 2];
     a.__proto__ = Array.prototype;
     console.log(a.length); //2
    

      又比如我们自己实现了一个构造函数,上面已经说到,自己实现的函数的默认prototype是一个空对象,所以由这个构造函数创建生成的对象的__proto__指向的是一个空对象。我们这时候就可以用prototype来继承或者实现一些事情。

    var MyFun = function (x, y) {
            this.x = x;
            this.y = y;
        };
    MyFun.prototype.getArea = function () {
            return this.x * this.
    }
    var obj = new MyFun(2, 3);
    var area = obj.getArea();
    console.log(area); //6
    

      写完才发现,可能这是史上最不清晰的阐述。但如果你对原型已经有了一知半解却还是有点模糊的话,好好的从头读到结尾,你会发现,原来掌握这个概念也是这么简单。

      完!祝好运。

  • 相关阅读:
    Tomcat Manager用户配置详解
    自动更新Chromium
    如何方便快速在指定文件夹打开命令行
    让Chrome 接管邮件连接,收发邮件更方便了
    Chrome扩展程序的二次开发:把它改得更适合自己使用
    更改Photoshop 语言为英语(无需语言包)
    Chrome 控制台新玩法-console显示图片以及为文字加样式
    JavaScript—之对象参数的引用传递
    jQuery 绑定事件到动态创建的元素上
    JavaScript –类型之我晕
  • 原文地址:https://www.cnblogs.com/wangjz1991/p/5440545.html
Copyright © 2020-2023  润新知