脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript原型与原型链

详解JavaScript原型与原型链

 更新时间：2020年11月16日 14:46:18   作者：CamWang  
这篇文章主要介绍了JavaScript原型与原型链的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下

正如一些面向对象语言中所实现的那样，在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复、实现类型检查与实现更加清晰地代码结构。在JavaScript中，继承是通过原型链实现的。了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式。

在JavaScript中创建对象

JavaScript中对象创建的方式有两种：工厂方法（Factory Functions）、构造器方法（Constructor Functions） 。

工厂方法

工厂方法在编程领域是一个非类或构造器的返回对象的方法。在JavaScript中，任何返回不使用new关键词创建对象的方法都是工厂方法。

function person(firstName, lastName, age) {
 const person = {};
 person.firstName = firstName;
 person.lastName = lastName;
 person.age = age;
 return person;
}

构造器方法

构造器方法和工厂方法的区别仅在用例和命名规范上。命名规范上一个构造器方法的名字开头字母需要大写，我们需要通过new关键词来调用构造器方法生成实例。这个实例之后便可以通过instanceof关键词来检查。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

new的行为

当同时在工厂方法和构造器方法上使用new关键词创建时，工厂方法创建出的对象的__proto__属性指向Object.prototype，构造器方法创建出的对象的__proto__属性指向本身的Xxx.prototype。

const mike = new person('mike', 'grand', 23);

mike.__proto__	// Object.prototype
const jack = new Person('jack', 'grand', 23);

jack.__proto__	// Person.protytype这里的prototype指向Person的Prototype Object
jack.__proto__.__proto__	// Object.prototype

new关键词在后台为构造器方法执行了以下几步

  1. 在构造器方法内创建一个新对象并将其赋值到this上
  2. 设置对象的[[Prototype]]和__proto__为原型的构造函数，这一步也让新对象的构造函数在构造新对象时被添加到原型链上
  3. 如果这个方法内没有返回object、function或array类型的结果，就返回this
  4. 如果这个方法内没有返回任何值则返回this

下面是一个展示new关键词在JavaScript引擎当中执行效果的伪代码，注释当中的是用来示范new关键词添加语句的伪代码

function Person(firstName, lastName, age) {
 // this = {};
 // this.__proto__ = Person.prototype;
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // return this;
}

在构造器方法上没有返回值所以后台创建的this将被返回，而工厂方法内由于返回了对象所以后台不再添加return this自然返回的内容将不一致。

如果没有在构造器方法前使用new关键词，而将构造器方法直接调用执行，其仅作为一个方法来被执行而非构造器。

const bob = Person('bob', 'grand', 23);
bob	// undefined. 因为这里Person当作方法直接调用了且没有返回值
window.firstName	// bob. 函数内的this将指向全局作用域，导致意外操作

继承与原型链

原型

原型（Prototype）可以认为是一个JavaScript方法的属性，每次在JavaScript代码中创建方法时，JavaScript引擎会将一个名为prototype的属性添加上去，这个prototype属性是一个对象（原型对象），这个对象默认有一个constructor属性指向原方法对象。任何添加到prototype的属性和方法都在这个对象里面，所有该类实例共享这个原型对象，实例对象的__proto__属性指向这个对象，方法的prototype属性指向这个对象。

在ECMAScript的标准里object.[[Prototype]]是访问原型的方法，但在ECMAScript 2015中用Object.getPrototypeOf()和Object.setPrototypeOf()来替代。等价的__proto__是多数浏览器使用的事实上的但是非标准的实现。

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
}

Person.prototype === Person.prototype.constructor.prototype	// 指向Person的原型对象
Person.prototype.constructor === Person	// 指向Person方法对象

let bob = new Person("Bob", "Ross", 21);
Person.prototype === bob.__proto__;	// true

let alex = new Person("Alex", "Wang", 21);
Person.prototype === alex.__proto__;	// true
alex.__proto__ === bob.__proto__;	// true

原型链

首先我们需要了解对象查找机制。当我们使用一个对象的属性时，JavaScript引擎会首先查找本对象里是否有对应属性，如果没有则去对象的原型里查找属性，如果没有则去对象的原型对象的原型对象里查找属性，直至查询到对象的__proto__为null的时候停止。

const obj = {};
console.log(obj);	// [object Object]	obj的toString()方法从Object的原型中查找到并使用

function Person(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 // 在Person.prototype上定义了toString覆写了Object.prototype上的toString
 Person.prototype.toString = function() {
  return `${this.firstName} It Is`;
 }
}

let bob = new Person("Bob", "Ross", 21);
let alex = new Person("Alex", "Wang", 21);
console.log(bob);	// Bob It Is
console.log(alex);	// Alex It Is

以上就是详解JavaScript原型与原型链的详细内容，更多关于JavaScript原型与原型链的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 微信小程序时间轴实现方法示例

    微信小程序时间轴实现方法示例

    这篇文章主要介绍了微信小程序时间轴实现方法,结合实例形式分析了微信小程序wx:for语句使用与时间轴纵向布局相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • VS2008中使用JavaScript调用WebServices

    VS2008中使用JavaScript调用WebServices

    这篇文章主要介绍了VS2008中使用JavaScript调用WebServices,需要的朋友可以参考下
    2014-12-12
  • 手机端转盘抽奖代码分享

    手机端转盘抽奖代码分享

    转盘，也有一种说法叫抽奖转盘，大体上是由一块圆形的面板上面有很多的奖项设置，在圆形面板的前面，还有一根指针是固定的，下面，小编给大家分享手机端转盘抽奖，需要的朋友可以参考下
    2015-09-09
  • JS取数字小数点后两位或n位的简单方法

    JS取数字小数点后两位或n位的简单方法

    下面小编就为大家带来一篇JS取数字小数点后两位或n位的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 深入浅析javascript立即执行函数

    深入浅析javascript立即执行函数

    在Javascript中，任何function在执行的时候都会创建一个执行上下文，因为为function声明的变量和function有可能只在该function内部，这个上下文，在调用function的时候，提供了一种简单的方式来创建自由变量或私有子function。
    2015-10-10
  • JavaScript的9种继承实现方式归纳

    JavaScript的9种继承实现方式归纳

    这篇文章主要介绍了JavaScript的9种继承实现方式归纳,本文讲解了原型链继承、原型继承（非原型链）、临时构造器继承、属性拷贝、对象间继承等继承方式,需要的朋友可以参考下
    2015-05-05
  • Javascript实现视频文件播放功能(示例详解)

    Javascript实现视频文件播放功能(示例详解)

    这篇文章主要介绍了Javascript实现视频文件播放功能,使用CSS完成相应的布局样式,利用JavaScript函数来监听进度条,然后使用鼠标点击按钮实现对视频的播放,需要的朋友可以参考下
    2023-10-10
  • 基于JS实现web端录音与播放功能

    基于JS实现web端录音与播放功能

    这篇文章主要介绍了纯js实现web端录音与播放功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-04-04
  • javascript 内存回收机制理解

    javascript 内存回收机制理解

    javascript语言是一门优秀的脚本语言.其中包含脚本语言的灵活性外还拥有许多高级语言的特性.
    2011-01-01
  • JavaScript实现点击按钮就复制当前网址

    JavaScript实现点击按钮就复制当前网址

    在大量的网站都有这样的功能，当点击一个按钮的时候可以复制当前页面的地址，以此可以方便网站用户对链接的存储，同时也便于网站的推广，下面给大家分享具体实现代码，对js实现点击按钮就复制的相关知识感兴趣的朋友一起学习吧
    2015-12-12

最新评论