JavaScript 之原型和原型链

Mike617 发布于2019-08-23 18:25 / 2381人阅读

摘要：对象会从原型对象继承一些属性和方法。如果对象的原型上面也没有这个属性，则继续在原型对象的上原型上面查找，如此一级级继续往上，直到原型为，此时引擎返回该对象的属性值为。

几个概念

构造函数：构造函数实际上是一个普通函数，通过new操作符，可以利用构造函数快速创建对象；

prototype：每个构造函数自身上都会有一个prototype属性，该属性值为一个对象，这个对象具有一个constructor属性，constructor指向构造函数自身；

实例：通过构造函数创建的对象，可以看做是该构造函数的实例；

__proto__：通过构造函数创建的每个对象上面，都会有一个__proto__属性，该属性指向构造函数的prototype；

什么是原型

在JavaScript中，每个对象会有一个原型对象。对象会从原型对象继承一些属性和方法。

什么是原型链

在JavaScript中，访问一个对象的属性时，JS引擎会首先在该对象自身上线查找该属性。如果找到了，则直接返回该属性的值；如果没有找到，则会去改对象的原型上面继续查找。如果对象的原型上面也没有这个属性，则继续在原型对象的上原型上面查找，如此一级级继续往上，直到原型为null，此时JS引擎返回该对象的属性值为undefined。

继承

        /**
         * two methods to implement inheritance;
        */

        function Base(type){ 
            this.type = type;
        }
        Base.prototype.base=function(){
            console.log(`${this.type} is in base func`);
        }
        // method one
        function Sub(type){
            this.type = type;
        }
        Sub.prototype = Object.create(new Base("base"));
        Sub.prototype.sub=function(){
            console.log(`${this.type} is in sub func`);
        }

        // method two
        function Foo(type){
            this.type = type;
        }
        Object.setPrototypeOf( Foo.prototype, new Sub("sub"));
        Foo.prototype.foo=function(){
            console.log(`${this.type} is in foo func`);
        }

        let sub = new Sub("sub1");
        sub.base();
        sub.sub();
        sub instanceof Sub; // true
        sub instanceof Base; // true

        let foo = new Foo("foo1");
        foo.base();
        foo.sub();
        foo.foo();
        foo instanceof Foo; // true
        foo instanceof Sub; // true
        foo instanceof Base; // true

一些实例 Object.getPrototype

预测下面几个表达式的结果

Object.getPrototypeOf(function(){}).constructor === Function;
Object.getPrototypeOf(Function).constructor === Function;
Object.getPrototypeOf(Object.getPrototypeOf(Function)).constructor === Object;

答案：

true;

如何创建一个没有任何原型的对象？

let obj = Object.create(null);
console.log(obj);

这篇medium上获得8.6K赞的文章Prototypes in JavaScript讲得很清楚了。

云服务器 GPU云服务器原型原型链原型链 javascript原型原型链继承

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

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

学习JavaScript之原型链

原型链之前一直都不是很理解，这两天把《你不知道的JavaScript》和《JavaScript高级程序设计》的原型链那章看完后有所理解，在这里先记下来，加深印象。什么是原型对象要讲清楚什么是原型链需要从原型对象开始谈，那么什么是原型对象呢？《JavaScript高级程序设计》中是这样讲的：无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，这个属...

Leo_chen 2019-08-22 11:04 评论0 收藏0
进击JavaScript之（四）原型与原型链

摘要：每一个由构造函数创建的对象都会默认的连接到该神秘对象上。在构造方法中也具有类似的功能，因此也称其为类实例与对象实例一般是指某一个构造函数创建出来的对象，我们称为构造函数的实例实例就是对象。表示该原型是与什么构造函数联系起来的。本文您将看到以下内容：传统构造函数的问题一些相关概念认识原型构造、原型、实例三角结构图对象的原型链函数的构造函数Function 一句话说明什么...

XBaron 2019-08-20 10:45 评论0 收藏0
JavaScript深入之从原型到原型链

摘要：深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。让我们用一张图表示构造函数和实例原型之间的关系在这张图中我们用表示实例原型。 JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先...

Songlcy 2019-08-21 15:32 评论0 收藏0
Javascript重温OOP之原型与原型链

摘要：在构造函数中的中定义的属性和方法，会被创建的对象所继承下来。从上面的输出结果看出，指向了其构造函数的，而本身也是一个对象，其内部也有属性，其指向的是直到最后指向，这条原型链才结束。和都指向，说明原型链到终止。 prototype原型对象每个函数都有一个默认的prototype属性，其实际上还是一个对象，如果被用在继承中，姑且叫做原型对象。在构造函数中的prototype中定义的属性...

lindroid 2019-08-21 10:57 评论0 收藏0
JavaScript基础之创建对象、原型、原型对象、原型链

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

wangbjun 2019-08-22 15:16 评论0 收藏0
深入学习js之——原型和原型链

摘要：我们用一张图表示构造函数和实例原型之间的关系好了构造函数和实例原型之间的关系我们已经梳理清楚了，那我们怎么表示实例与实例原型，也就是或者和之间的关系呢。开篇：在Brendan Eich大神为JavaScript设计面向对象系统的时候，借鉴了Self 和Smalltalk这两门基于原型的语言，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始B...

FingerLiu 2019-08-23 15:25 评论0 收藏0