JavaScript中原型对象的彻底理解

最新推荐文章于 2022-06-23 12:41:28 发布
最新推荐文章于 2022-06-23 12:41:28 发布
阅读量147 收藏 1
点赞数
文章标签： javascript c# java ViewUI
原文链接：https://yq.aliyun.com/articles/486435
版权

一、什么是原型

原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。

1、函数的原型对象

在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

看下面的代码：

<body>
    <script type="text/javascript">
        /*
            声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
            创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
            有一个属性叫constructor 指向了这个函数

            注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
        */
        function Person () {

        }       
    </script>
</body>

下面的图描述了声明一个函数之后发生的事情：
这里写图片描述

2、使用构造函数创建对象

当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。 这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。
​
看下面的代码：

<body>
    <script type="text/javascript">
        function Person () {

        }   
        /*
            利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
            指向了构造函数的原型对象。
        */
        var p1 = new Person();
    </script>
</body>

观察下面的示意图：
这里写图片描述

说明：

  1. 从上面的图示中可以看到，创建p1对象虽然使用的是Person构造函数，但是对象创建出来之后，这个p1对象其实已经与Person构造函数没有任何关系了，p1对象的[[prototype ]]属性指向的是Person构造函数的原型对象。
  2. 如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。
  3. 我们可以手动给这个原型对象添加属性和方法，那么p1,p2,p3…这些对象就会共享这些在原型中添加的属性和方法。
  4. 如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。后面再讲)。
  5. 如果通过p1对象添加了一个属性name，则p1对象来说就屏蔽了原型中的属性name。换句话说：在p1中就没有办法访问到原型的属性name了。
  6. 通过p1对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 p1.name = “李四”; 并不是修改了原型中的值，而是在p1对象中给添加了一个属性name。

看下面的代码：

<body>
    <script type="text/javascript">
        function Person () {        
        }
        // 可以使用Person.prototype 直接访问到原型对象
        //给Person函数的原型对象中添加一个属性 name并且值是 "张三"
        Person.prototype.name = "张三";
        Person.prototype.age = 20;

        var p1 = new Person();
        /*
            访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
            p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
            就值。
            注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
        */
        alert(p1.name);  // 张三

        var p2 = new Person();
        alert(p2.name);  // 张三  都是从原型中找到的，所以一样。

        alert(p1.name === p2.name);  // true

        // 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
        //原型中的属性。
        p1.name = "李四";
        alert("p1：" + p1.name);
        // 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。    
        alert("p2:" + p2.name);  // 张三  
    </script>
</body>

这里写图片描述

二、与原型有关的几个属性和方法

1、prototype属性

​prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

​ 参考前面的示意图。

2、constructor属性

​constructor属性存在于原型对象中，他指向了构造函数。

看下面的代码：

<script type="text/javascript">
    function Person () {
    }
    alert(Person.prototype.constructor === Person); // true
    var p1 = new Person();
    //使用instanceof 操作符可以判断一个对象的类型。  
    //typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
    alert(p1 instanceof Person);    // true
</script>
我们根据需要，可以Person.prototype 属性指定新的对象，来作为Person的原型对象。
但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        name:"志玲",
        age:20
    };
    var p1 = new Person();
    alert(p1.name);  // 志玲

    alert(p1 instanceof Person); // true
    alert(Person.prototype.constructor === Person); //false
    //如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
    /*
    Person.prototype = {
        constructor : Person    //让constructor重新指向Person函数
    }
    */
</script>

3、proto 属性(注意：左右各是2个下划线)

用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.proto

​但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

<script type="text/javascript">
    function Person () {

    }
    //直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
    Person.prototype = {
        constructor : Person,
        name:"志玲",
        age:20
    };
    var p1 = new Person();

    alert(p1.__proto__ === Person.prototype);   //true

</script>

4、hasOwnProperty() 方法

​大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

​ 那么如何判断这个对象的来源呢？

​ hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    //sex属性是直接在p1属性中添加，所以是true
    alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
    // name属性是在原型中添加的，所以是false
    alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
    //  age 属性不存在，所以也是false
    alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));

</script>
所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。 

如何判断一个属性是否存在于原型中呢？

5、in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
    function Person () {

    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";
    alert("sex" in p1);     // 对象本身添加的，所以true
    alert("name" in p1);    //原型中存在，所以true
    alert("age" in p1);     //对象和原型中都不存在，所以false

</script>
回到前面的问题，如果判断一个属性是否存在于原型中：
如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。 

<script type="text/javascript">
    function Person () {
    }
    Person.prototype.name = "志玲";
    var p1 = new Person();
    p1.sex = "女";

    //定义一个函数去判断原型所在的位置
    function propertyLocation(obj, prop){
        if(!(prop in obj)){
            alert(prop + "属性不存在");
        }else if(obj.hasOwnProperty(prop)){
            alert(prop + "属性存在于对象中");
        }else {
            alert(prop + "对象存在于原型中");
        }
    }
    propertyLocation(p1, "age");
    propertyLocation(p1, "name");
    propertyLocation(p1, "sex");
</script

三、组合原型模型和构造函数模型创建对象

1、原型模型创建对象的缺陷

​ 原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

​ 但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。

​ ==但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。==所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。

2、构造函数模型创建对象的缺陷

在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = function() {
            alert("吃完东西");
        }
    }
    var p1 = new Person();
    var p2 = new Person();
    //每个对象都会有不同的方法
    alert(p1.eat === p2.eat); //fasle
</script>

可以使用下面的方法解决：

<script type="text/javascript">
    function Person() {
        this.name = "李四";
        this.age = 20;
        this.eat = eat;
    }
    function eat() {
        alert("吃完东西");
    }
    var p1 = new Person();
    var p2 = new Person();
    //因为eat属性都是赋值的同一个函数，所以是true
    alert(p1.eat === p2.eat); //true
</script>

但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3、使用组合模式解决上述两种缺陷

原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。

<script type="text/javascript">
    //在构造方法内部封装属性
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    //在原型对象内封装方法
    Person.prototype.eat = function (food) {
        alert(this.name + "爱吃" + food);
    }
    Person.prototype.play = function (playName) {
        alert(this.name + "爱玩" + playName);
    }

    var p1 = new Person("李四", 20);
    var p2 = new Person("张三", 30);
    p1.eat("苹果");
    p2.eat("香蕉");
    p1.play("志玲");
    p2.play("凤姐");
</script>

四、动态原型模式创建对象

​前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

​ 动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

看下面的代码：

<script type="text/javascript">
    //构造方法内部封装属性
    function Person(name, age) {
        //每个对象都添加自己的属性
        this.name = name;
        this.age = age;
        /*
            判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
            则把这个funcion添加到原型中。
            如果是function，则代表原型中已经有了这个方法，则不需要再添加。
            perfect！完美解决了性能和代码的封装问题。
        */
        if(typeof this.eat !== "function"){
            Person.prototype.eat = function () {
                alert(this.name + " 在吃");
            }
        }
    }
    var p1 = new Person("志玲", 40);
    p1.eat();   
</script>

说明：

  • 组合模式和动态原型模式是JavaScript中使用比较多的两种创建对象的方式。
  • 建议以后使用动态原型模式。他解决了组合模式的封装不彻底的缺点。
weixin_33845881
关注
猿创征文｜在工作中彻底搞懂原型和原型链的原理
软贱开发攻城狮
09-01 1441
在前端开发过程中，涉及到JS原理相关的内容也就是常用的几大模块，不仅常用而且很重要，但是涉及到原理的话会有点难懂，尤其是对JS接触不太久的开发者来讲，甚至工作好几年的开发者也只是在平时开发中知道怎么使用，要想让他讲原理也是讲的不完全，所以这就需要我们在开发的时候把原理运用到实际工作中，这样可以起到事半功倍的效果，不仅完成了工作任务也彻底搞清楚了使用原理，岂不美哉？！......
前端面试知识点--面向对象
阿虾搞搞的博客
02-22 327
类与实例 类的声明 生成实例 /** * 类的声明 */ var Animal = function () { this.name = 'Animal'; }; /** * es6中class的声明 */ class Animal2 { constructor () { this.name = 'Animal2'; } } /** * 实例化 ...
[乐意黎转载]JavaScript中原型对象的彻底理解
打杂人
12-05 885
一、什么是原型 原型是Javascript中的继承的继承，JavaScript的继承就是基于原型的继承。 1.1 函数的原型对象 ​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函
关于javascript的原型对象的一些理解
engineer的博客
05-08 823
1、关于原型模式 有了构造函数模式创建对象为什么还要使用原型模式呢？因为构造函数模式是有缺陷的，我们创建的实例每个方法和属性都要在实例上面重新创建一遍，这样极浪费内存，尤其我们创建的多个实例是为了完成同一件事，那么相应的方法也要创建多次。当然这件事也是有解决方法的，就是把方法的声明放在全局环境中，在构造函数内部设置一个属性指向全局环境中的方法，这样可以解决不用创建多个相同的方法来做同一件事情。但
弄懂js中的原型对象
CalmHarbin的博客
01-19 395
首先有哪些知识点? __proto__     对象的原型对象 prototype      返回函数的原型对象 constructor   返回创建此对象的数组函数的引用 instanceof     判断是不是函数的实例 getPrototypeOf()    返回对象的原型对象 setPrototypeOf()   设置对象的原型对象 Object.create()    创建...
JavaScript中原型对象的彻底理解(转载)
weixin_37328901的博客
03-20 228
https://blog.csdn.net/u012468376/article/details/53121081 作者：做人要厚道2013 来源：CSDN 原文：https://blog.csdn.net/u012468376/article/details/53121081 版权声明：本文为博主原创文章，转载请附上博文链接！ ...
教你如何彻底理解JavaScript原型
编程知识分享
05-11 329
彻底理解JavaScript原型 原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有"[[prototype]]"属性，函数对象有"prototype"属性，原型对象有"constructor"属性。 为了弄清原型，以及原型相关的这些属性关系，就有了这篇文章。 相信通过这篇文章一定能够清楚的认识到原型，现在就开始原型之旅吧。 如果你对编程感兴趣或者想往编程方向...
详解JS中的原型与继承
riddle1981的博客
05-10 855
每当我们提起原型链时不免会想到原型对象，对象的原型，还有众多的继承方式。于是prototype、[[prototype]]、constructor等等难免在头脑中打架。 然而原型其实并不是什么高大上的内容，事实上随处可见。每当我们尝试调用对象方法或者获取对象属性时。js引擎都会检测对象上是否存在这个方法或属性，如果没有会检查他的原型链上是否存在这个方法或属性。直到检查到了结果或者遍历完了整条原型链都没有找到。除了对象，例如数组或函数本质上也都是对象，因此原型在js中其实是一个很基础但重要的内容。 本文尝试用
web前端手册
caiqian97的博客
08-28 1803
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
JavaScript原型对象和垃圾回收机制
weixin_57764814的博客
05-08 483
1.JavaScript原型prototype 我们创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。如果函数作为普通函数调用prototype没有任何作用。 当函数以构造函数的形式调用时，它所创建的对象中都有会一个隐藏的属性。 指向该构造函数的原型对象，我们可以通过proto来访问该属性。 2.原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象。我们可以将对象中共有的内容，统一设置到原型对象中.
JavaScript中的原型对象
weixin_50379372的博客
06-23 133
JavaScript:原型prototype：我们在创建每个函数都有一个prototype属性 这个属性是一个指针，指向一个对象，这个对象就是我们所谓的原型对象
JavaScript原型对象
weixin_57773213的博客
06-08 254
注意共4有个步骤，按顺序操作下去1.JavaScript原型prototype我们创建的每一个函数，解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象如果函数作为普通函数调用prototype没有任何作用， 当函数以构造函数的形式调用时，它所创建的对象中都有会一个隐藏的属性，指向该构造函数的原型对象，我们可以通过proto来访问该属性原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象
JavaScript的原型对象
ikaraide的专栏
03-16 855
我们创建的每个函数都有一个prototype属性，这个属性是一个指针，指向一个对象，而这个prototype 原型对象的用途是包含可以由特定类型的所有实例共享的属性和方法。这么理解的话，prototype就是通过 调用构造函数而创建的那个对象实例的原型对象。使用prototype对象可以让所有对象实例共享prototype所 包含的属性和方法。
javaScript对象 原型深入理解 继承
lmj121212的专栏
03-15 482
javaScript对象 原型继承 构造函数继承 组合继承 javaScript是脚本语言。脚本程序在执行时，是由系统的一个解释器，将其一条条的翻译成机器可识别的指令，并按程序顺序执行。脚本语言是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。一个脚本通常是解释执行而非编译。 数据类型字符串（String）、数字(Number)、布尔(
Javascript中的原型对象
08-22 82
原型prototype 　　我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype 　　　　这个属性对应着一个对象，这个对象就是我们所谓的原型对象 　　如果函数作为普通函数，调用prototype没有任何作用 　　当函数作为普通函数调用时，它所创建的对象中都会有一个隐含的属性， 　　　　指向该构造函数的原型对象，我们可以通过_ _proto_ _来访问该属性 ...
JavaScript中什么是原型对象，原型链及其用法。
csdn2990的博客
04-12 142
每个函数创建后，解析器都会向函数中添加一个属性prototype 这个属性对应一个对象,这个对象就是我们所谓的原型的对象 如果函数作为普通函数调用则prototype无意义 如果函数以构造函数形式调用，它所创建的对象中都会有个隐藏的属性 指向该构造函数的原型对象，我们可以通过__proto__来访问该属性 原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象 我们可以将对象共有的内容，统一设置到原型对象 ...
JavaScript原型
不再闪亮的星星的博客
03-01 2016
JavaScript原型及原型链 前言 prototype（原型）：函数中的一个属性，指向该构造函数的原型对象（原型对象用于实例共享属性和方法） __proto__：对象中的一个属性，指向构造函数的原型对象，在ECMA-262第五版中被称为[[prototype]]，且没有标准的方式能访问到，__proto__为浏览器支持属性； constructor：原型对象中的一个属性，指向该原型对象的构造...
深入理解js原型对象
weixin_43950643的博客
06-07 293
原型(公有属性) 1.1 构造函数原型 prototype prototype ----》原型对象 构造函数通过原型分配的函数是所有对象所共享 每一个构造函数都有一个prototype属性，指向另一个对象。注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有 1.2 对象原型 proto __proto__对象原型与原型对象prototype是等价的 对象都会有一个属性__proto__指向构造函数的prototype原型对象，之所以我们对象可以使用构造函
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值