JavaScript原型对象

Lorry_Lu 发布于2019-08-21 10:39 / 818人阅读

摘要：在默认情况下，所有原型对象都会自动获得一个构造函数属性，这个属性包含一个指向属性所在函数的指针。不过，要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

本篇文章主要讲JavaScript对象中的原型模式：

1、理解原型对象

无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属性指向函数的原型对象。在默认情况下，所有原型对象都会自动获得一个constructor（构造函数）属性，这个属性包含一个指向prototype属性所在函数的指针。
创建了自定义的构造函数之后，其原型对象默认只会取得constructor属性，至于其他方法，则都是从object继承而来的。当调用构造函数创建一个新实例后，该实例的内部将包含一个指针（内部属性），指向构造函数的源性对象。ECMA-262第5版中管这个指针叫[[prototype]]。虽然在脚本中没有标准的方式访问[[prototype]]，但FireFox、Safari和chrome在每个对象上都支持一个属性：proto；而在其他实现中，这个属性对脚本则是完全不可见的。不过，要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。

如下一段代码：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    person1.sayName();  //"Jessiva"

    var person2=new Person();
    person2.sayName();   //"Jessiva"

    alert(person1.sayName==person2.sayName); //true

下图展示了这段代码的各个对象之间关系：

虽然在所有的实现中都无法访问到[[prototype]]，但可以通过isPrototypeOf()方法来确定对象之间是否存在这种关系。从本质上讲，如果[[prototype]]指向调用isPrototypeOf()方法的对象（Person.prototype）,那么这个方法就返回true，如下所示：

alert(Person.prototype.isPrototypeOf(person1));  //true
alert(Person.prototype.isPrototypeOf(person2));  //true

在ECMAScript5增加了一个新方法，叫object.getPrototypeOf(),在所有支持的实现中，这个方法返回[[prototype]]的值。例如：

alert(Object.getPrototypeOf(person1)==Person.prototype); //true
alert(Object.getPrototypeOf(person1).name);  //"Jessica"

使用Object.getPrototypeOf()可以方便的取得一个对象的原型，而这在利用原型实现继承（稍后会有文章更新）的情况下是非常重要的。

虽然可以通过对象实例访问保存在原型中的值，但却不恩能够通过对象实例重写原型中的值，如果我们再实例中添加了一个属性，而该属性与实例原型中的一个属性同名，那我们就在实例中创建该属性，该属性将会屏蔽原型中的那个属性。来看下面的例子：

function Person(){

    }

    Person.prototype.name="Jessica";
    Person.prototype.age=25;
    Person.prototype.job="Web software Engineer";
    Person.prototype.sayName=function(){
        alert(this.name);
    }
    var person1=new Person();
    var person2=new Person();
    
    person1.name="Greg";
    alert(person1.name); //"Greg"--来自实例
    alert(person2.name); //"Jessica"--来自原型

使用delete操作符则可以完全删除实例属性，从而让我们能够重新访问原型中的属性。

使用hasOwnProperty()方法则可以检测一个属性是存在于实例中还是存在于原型中。这个方法（继承于Object）只在给定属性存在于对象实例中，才会返回true。

GPU云服务器云服务器 javascript原型 javascript对象 javascript 面向对象 javascript对象方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85933.html

理解JavaScript的核心知识点：原型

摘要：首先，需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考，面向对象编程是其一种思维方式，与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者（包括本人）低估甚至忽视了，这是因为绝大多数人没有想要深刻理解这个机制的内涵，以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

iKcamp 2019-08-23 18:34 评论0 收藏0
JavaScript基础之创建对象、原型、原型对象、原型链

摘要：在最开始的时候，原型对象的设计主要是为了获取对象的构造函数。同理数组通过调用函数通过调用原型链中描述了原型链的概念，并将原型链作为实现继承的主要方法。对象的创建在JavaScript中创建一个对象有三种方式。可以通过对象直接量、关键字new和Object.create()函数来创建对象。 1. 对象直接量创建对象最直接的方式就是在JavaScript代码中使用对象直接量。在ES5...

wangbjun 2019-08-22 15:16 评论0 收藏0
深入理解Javascript原型关系

摘要：如下所示在规范中，已经正式把属性添加到规范中也可以通过设置和获取对象的原型对象对象之间的关系可以用下图来表示但规范主要介绍了如何利用构造函数去构建原型关系。前言在软件工程中，代码重用的模式极为重要，因为他们可以显著地减少软件开发的成本。在那些主流的基于类的语言（比如Java,C++）中都是通过继承(extend)来实现代码复用，同时类继承引入了一套类型规范。而JavaScript是...

ethernet 2019-08-22 14:06 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

xuexiangjys 2019-08-02 16:12 评论0 收藏0
如何理解JavaScript的原型和原型链？

摘要：之前有朋友问怎么去理解原型和原型链的问题。理解原型链的小技巧将箭头视作泛化子类到父类关系那么图中所有的虚线将构成一个继承层级，而实线表示属性引用。原型链是实现继承的重要方式，原型链的形成是真正是靠而非。之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。 JavaScript的特点JavaScript是一门直译式脚本...

adie 2019-08-23 16:54 评论0 收藏0
(JavaScript)原型与原型对象

摘要：值得注意的是原型对象也拥有一个属性指向其函数。以上的原因就造成了很少有使用纯的原型模式创建对象，而其他混合使用原型模式的创建对象模式就不在这里展开说了。第一次记录自己学习的脚步，我选择了JavaScript中自认为比较熟悉的一小部分来说，诚挚的希望能够得到各位前辈的批评与指正。而对于看到我这篇笔记希望从这篇笔记中收获知识的读者，我希望你们可以参考权威，拥有自己的真知灼见而不听我一家之...

Muninn 2019-08-26 11:49 评论0 收藏0