浅谈javascript的原型及原型链

includecmath 发布于2019-08-20 14:17 / 3192人阅读

摘要：在中，主要有两种创建对象的方法分别是对象字面量以及调用构造函数对象字面量调用构造函数其实上述两种创建对象的方法，本质上是一样的，都是引擎调用对象的构造函数来新建出一个对象。

原型与原型链是javascript里面最最核心的内容，如果不能理解它们之间的存在关系的话，那么我们是不能理解这门语言的。

在JS中，主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数

//对象字面量
var obj1 = {}

//调用构造函数
var obj2 = new Object()

其实上述两种创建对象的方法，本质上是一样的，都是JS引擎调用对象的构造函数来新建出一个对象。构造函数本身也是一个普通的JS函数

下面我们来看一个例子

//创建构造函数
function Person(name){
    this.name = name
}

//每个构造函数JS引擎都会自动添加一个prototype属性，我们称之为原型，这是一个对象
//每个由构造函数创建的对象都会共享prototype上面的属性与方法
console.log(typeof Person.prototype) // "object"


//我们为Person.prototype添加sayName方法
Person.prototype.sayName = function(){
    console.log(this.name)
}

//创建实例
var person1 = new Person("Messi")
var person2 = new Person("Suarez")

person1.sayName() // "Messi"
person2.sayName() // "Suarez"

person1.sayName === person2.sayName //true

我们借助上面的例子来理解构造函数-原型-实例，三者之间的关系，主要有几个基本概念

构造函数默认会有一个protoype属性指向它的原型

构造函数的原型会有一个consctructor的属性指向构造函数本身, 即

    Person.prototype.constructor === Person

每一个new出来的实例都有一个隐式的__proto__属性，指向它们的构造函数的原型，即

person1.__proto__ === Person.prototype
person1.__proto__.constructor === Person

了解了这些基本概念之后，我们再来看看javascript的一些原生构造函数的关系网，看下列的图

引自stackoverflow

按照我们上面的理解, Oject本身是一个构造函数，它也是一个对象，那么

    Object.__proto__ === Function.prototype

为了方便我们记住上图，还有几个需要我们知道的特殊概念：

Function的原型属性与Function的原型指向同一个对象. 即

    Function.__proto__ == Function.prototype

Object.prototype.__proto__ === null

typeof Function.prototype === "function"

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

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

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

浅谈 JavaScript 原型链

摘要：数组的构造函数是原型链的指向与其他除以外的构造函数相同，的也指向顶级原型对象，每一个数组都是的实例，都指向。实例对象查找构造函数原型对象的方法一般会把对象共有的属性和方法都放在构造函数的原型对象上。 showImg(https://segmentfault.com/img/remote/1460000018998704?w=900&h=506); 阅读原文概述在 JavaScr...

explorer_ddf 2019-08-23 12:18 评论0 收藏0
浅谈JavaScript原型与原型链

摘要：在讲原型之前，先简单介绍一下几个概念构造函数例如上述代码创建的函数就被称为构造函数。同一个构造函数实例化得到的多个对象具有相同的原型对象，所以经常使用原型对象来实现继承。实例对象通过操作构造函数所创建的对象是实例对象。对于很多前端开发者而言，JavaScript的原型实在是很让人头疼，所以我这边就整理了一下自己对应原型的一点理解，分享给大家，供交流使用原型说起原型，那就不得不说p...

Zoom 2019-08-20 19:06 评论0 收藏0
浅谈JavaScript原型与原型链

摘要：在讲原型之前，先简单介绍一下几个概念构造函数例如上述代码创建的函数就被称为构造函数。同一个构造函数实例化得到的多个对象具有相同的原型对象，所以经常使用原型对象来实现继承。实例对象通过操作构造函数所创建的对象是实例对象。对于很多前端开发者而言，JavaScript的原型实在是很让人头疼，所以我这边就整理了一下自己对应原型的一点理解，分享给大家，供交流使用原型说起原型，那就不得不说p...

Yang_River 2019-08-01 17:31 评论0 收藏0
浅谈JavaScript原型链

摘要：在这其中我们就逃不开要讨论继承原型对象构造函数实例了。想要获得某一类型的构造函数可以用来获得，也可以对该属性进行赋值操作。三上面就提到一点是指构造函数的原型对象，它是一个对象，它是构造函数的属性。原型链这一个话题，需要和很多概念一起讲，才能串成一个比较系统的知识点。在这其中我们就逃不开要讨论继承、原型对象、构造函数、实例了。一、构造函数构造函数是一类特殊的函数，它的作用是用来生成...

xumenger 2019-08-23 14:31 评论0 收藏0