JS面试高频题原型与原型链-木庄网络博客

本文摘自PHP中文网，作者little bottle，侵删。

原型与原型链作为前端高频面试题之一，相信很多小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？

【相关推荐：前端面试题】

国际惯例，让我们先抛出问题：

什么是原型、原型链
它们有什么特点
它们能做什么
怎么确定它们的关系

或许你已经有答案，或许你开始有点疑惑，无论是 get 新技能或是简单的温习一次，让我们一起去探究一番吧

如果文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

原型

JavaScript 是基于原型的
我们创建的每个函数都有一个 prototype(原型) 属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

简单来说，就是当我们创建一个函数的时候，系统就会自动分配一个 prototype属性，可以用来存储可以让所有实例共享的属性和方法

用一张图来表示就更加清晰了：

图解：

每一个构造函数都拥有一个 prototype 属性，这个属性指向一个对象，也就是原型对象
原型对象默认拥有一个 constructor 属性，指向指向它的那个构造函数
每个对象都拥有一个隐藏的属性 __proto__，指向它的原型对象

function Person(){}
 
var p = new Person();
 
p.__proto__ === Person.prototype // true
 
Person.prototype.constructor === Person // true

那么，原型对象都有哪些特点呢

原型特点

function Person(){}
Person.prototype.name = 'tt';
Person.prototype.age = 18;
Person.prototype.sayHi = function() {
    alert('Hi');
}
var person1 = new Person();
var person2 = new Person();
person1.name = 'oo';
person1.name // oo
person1.age // 18
perosn1.sayHi() // Hi
person2.age // 18
person2.sayHi() // Hi

从这段代码我们不难看出：

实例可以共享原型上面的属性和方法
实例自身的属性会屏蔽原型上面的同名属性，实例上面没有的属性会去原型上面找

既然原型也是对象，那我们可不可以重写这个对象呢？答案是肯定的

function Person() {}
Person.prototype = {
    name: 'tt',
    age: 18,
    sayHi() {
        console.log('Hi');
    }
}
 
var p = new Person()

只是当我们在重写原型链的时候需要注意以下的问题:

function Person(){}
var p = new Person();
Person.prototype = {
    name: 'tt',
    age: 18
}
 
Person.prototype.constructor === Person // false
 
p.name // undefined

一图胜过千言万语

在已经创建了实例的情况下重写原型，会切断现有实例与新原型之间的联系
重写原型对象，会导致原型对象的 constructor 属性指向 Object ，导致原型链关系混乱，所以我们应该在重写原型对象的时候指定 constructor( instanceof 仍然会返回正确的值)

Person.prototype = {
    constructor: Person
}

注意：以这种方式重设 constructor 属性会导致它的 Enumerable 特性被设置成 true(默认为false)

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » JS面试高频题原型与原型链

原型

原型特点

相关推荐

评论