面试的总结语，一文吃透所有JS原型相关知识点，极其重要

其中 constructor 属性，虚线表示继承而来的 constructor 属性。

__proto__介绍的原型链，我们在图中直观的标出来的话就是如下这个样子

typeof && instanceof 原理

---

问什么好端端的说原型、说继承会扯到类型判断的原理上来呢。毕竟原理上有一丝的联系，往往面试也是由浅入深、顺藤摸瓜的拧出整个知识面。所以这里我们也简单说一下吧。

typeof

MDN 文档点击这里：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof

基本用法

typeof 的用法相比大家都比较熟悉，一般被用于来判断一个变量的类型。我们可以使用 typeof 来判断number、undefined、symbol、string、function、boolean、object 这七种数据类型。但是遗憾的是，typeof 在判断 object 类型时候，有些许的尴尬。它并不能明确的告诉你，该 object 属于哪一种 object。

let s = new String(‘abc’);

typeof s === ‘object’// true

typeof null;//“object”

原理浅析

要想弄明白为什么 typeof 判断 null 为 object，其实需要从js 底层如何存储变量类型来说起。虽然说，这是 JavaScript 设计的一个 bug。

在 JavaScript 最初的实现中，JavaScript 中的值是由一个表示类型的标签和实际数据值表示的。对象的类型标签是 0。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"。曾有一个 ECMAScript 的修复提案（通过选择性加入的方式），但被拒绝了。该提案会导致 typeof null === 'null'。

js 在底层存储变量的时候，会在变量的机器码的低位1-3位存储其类型信息：

• 1：整数

• 110：布尔

• 100：字符串

• 010：浮点数

• 000：对象

但是，对于 undefined 和 null 来说，这两个值的信息存储是有点特殊的：

• null：所有机器码均为0

• undefined：用 −2^30 整数来表示

所以在用 typeof 来判断变量类型的时候，我们需要注意，最好是用 typeof 来判断基本数据类型（包括symbol），避免对 null 的判断。

typeof 只是咱在讨论原型带出的 instanceof 的附加讨论区

instanceof

object instanceof constructor

instanceof 和 typeof 非常的类似。instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

基本用法

// 定义构造函数

function C(){}

function D(){}

var o = new C();

o instanceof C; // true，因为 Object.getPrototypeOf(o) === C.prototype

o instanceof D; // false，因为 D.prototype 不在 o 的原型链上

o instanceof Object; // true，因为 Object.prototype.isPrototypeOf(o) 返回 true

C.prototype instanceof Object // true，同上

C.prototype = {};

var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false，C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.

D.prototype = new C(); // 继承

var o3 = new D();

o3 instanceof D; // true

o3 instanceof C; // true 因为 C.prototype 现在在 o3 的原型链上

如上，是 instanceof 的基本用法，它可以判断一个实例是否是其父类型或者祖先类型的实例。

console.log(Object instanceof Object);//true

console.log(Function instanceof Function);//true

console.log(Number instanceof Number);//false

console.log(String instanceof String);//false

console.log(Function instanceof Object);//true

console.log(Foo instanceof Function);//true

console.log(Foo instanceof Foo);//false

为什么 Object 和 Function instanceof 自己等于 true，而其他类 instanceof 自己却又不等于 true 呢？如何解释？

要想从根本上了解 instanceof 的奥秘，需要从两个方面着手：1，语言规范中是如何定义这个运算符的。2，JavaScript 原型继承机制。

原理浅析

经过上述的分析，想必大家对这种经典神图已经不那么陌生了吧，那咱就对着这张图来聊聊 instanceof

这里，我直接将规范定义翻译为 JavaScript 代码如下：

function instance_of(L, R) {//L 表示左表达式，R 表示右表达式

var O = R.prototype;// 取 R 的显示原型

L = L.proto;// 取 L 的隐式原型

while (true) {

if (L === null)

return false;

if (O === L)// 这里重点：当 O 严格等于 L 时，返回 true

return true;

L = L.proto;

}

}

所以如上原理，加上上文解释的原型相关知识，我们再来解析下为什么Object 和 Function instanceof 自己等于 true。

• Object instanceof Object

// 为了方便表述，首先区分左侧表达式和右侧表达式

ObjectL = Object, ObjectR = Object;

// 下面根据规范逐步推演

O = ObjectR.prototype = Object.prototype

L = ObjectL.proto = Function.prototype

// 第一次判断

O != L

// 循环查找 L 是否还有 proto

L = Function.prototype.proto = Object.prototype

// 第二次判断

O == L

// 返回 true

• Function instanceof Function

// 为了方便表述，首先区分左侧表达式和右侧表达式

FunctionL = Function, FunctionR = Function;

// 下面根据规范逐步推演

O = FunctionR.prototype = Function.prototype

L = FunctionL.proto = Function.prototype

// 第一次判断

O == L

// 返回 true

• Foo instanceof Foo

// 为了方便表述，首先区分左侧表达式和右侧表达式

FooL = Foo, FooR = Foo;

// 下面根据规范逐步推演

O = FooR.prototype = Foo.prototype

L = FooL.proto = Function.prototype

// 第一次判断

O != L

// 循环再次查找 L 是否还有 proto

L = Function.prototype.proto = Object.prototype

// 第二次判断

O != L

// 再次循环查找 L 是否还有 proto

L = Object.prototype.proto = null

// 第三次判断

L == null

// 返回 false

ES5 中的继承实现方式

---

在继承实现上，工业聚大大在他的原型文章中，将原型继承分为两大类，显式继承和隐式继承。感兴趣的可以点击文末参考链接查看。

但是本文还是希望能够基于“通俗”的方式来讲解几种常见的继承方式和优缺点。大家可多多对比查看，其实原理都是一样，名词也只是所谓的代称而已。

关于继承的文章，很多书本和博客中都有很详细的讲解。以下几种继承方式，均总结与《JavaScript 设计模式》一书。也是笔者三年前写的一篇文章了。

new 关键字

在讲解继承之前呢，我觉得 new 这个东西很有必要介绍下~

一个例子看下new 关键字都干了啥

function Person(name,age){

this.name = name;

this.age = age;

this.sex = ‘male’;

}

Person.prototype.isHandsome = true;

Person.prototype.sayName = function(){

console.log(Hello , my name is ${this.name});

}

let handsomeBoy = new Person(‘Nealyang’,25);

console.log(handsomeBoy.name) // Nealyang

console.log(handsomeBoy.sex) // male

console.log(handsomeBoy.isHandsome) // true

handsomeBoy.sayName(); // Hello , my name is Nealyang

从上面的例子我们可以看到：

• 访问到 Person 构造函数里的属性

• 访问到 Person.prototype 中的属性

new 手写版本一

function objectFactory() {

const obj = new Object(),//从Object.prototype上克隆一个对象

Constructor = [].shift.call(arguments);//取得外部传入的构造器

const F=function(){};

F.prototype= Constructor.prototype;

obj=new F();//指向正确的原型

Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

return obj;//返回 obj

};

• 用new Object() 的方式新建了一个对象 obj

• 取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数

• 将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性

• 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就可以访问到构造函数中的属性

• 返回 obj

下面我们来测试一下：

function Person(name,age){

this.name = name;

this.age = age;

this.sex = ‘male’;

}

Person.prototype.isHandsome = true;

Person.prototype.sayName = function(){

console.log(Hello , my name is ${this.name});

}

function objectFactory() {

let obj = new Object(),//从Object.prototype上克隆一个对象

Constructor = [].shift.call(arguments);//取得外部传入的构造器

console.log({Constructor})

const F=function(){};

F.prototype= Constructor.prototype;

obj=new F();//指向正确的原型

Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

return obj;//返回 obj

};

let handsomeBoy = objectFactory(Person,‘Nealyang’,25);

console.log(handsomeBoy.name) // Nealyang

console.log(handsomeBoy.sex) // male

console.log(handsomeBoy.isHandsome) // true

handsomeBoy.sayName(); // Hello , my name is Nealyang

注意上面我们没有直接修改 obj 的__proto__隐式挂载。

new 手写版本二

考虑构造函数又返回值的情况：

• 如果构造函数返回一个对象，那么我们也返回这个对象

• 如上否则，就返回默认值

function objectFactory() {

var obj = new Object(),//从Object.prototype上克隆一个对象

Constructor = [].shift.call(arguments);//取得外部传入的构造器

var F=function(){};

F.prototype= Constructor.prototype;

obj=new F();//指向正确的原型

var ret = Constructor.apply(obj, arguments);//借用外部传入的构造器给obj设置属性

return typeof ret === ‘object’ ? ret : obj;//确保构造器总是返回一个对象

};

关于 call、apply、bind、this 等用法和原理讲解：【THE LAST TIME】this：call、apply、bind

类式继承

function SuperClass() {

this.superValue = true;

}

SuperClass.prototype.getSuperValue = function() {

return this.superValue;

}

function SubClass() {

this.subValue = false;

}

SubClass.prototype = new SuperClass();

SubClass.prototype.getSubValue = function() {

return this.subValue;

}

var instance = new SubClass();

console.log(instance instanceof SuperClass)//true

console.log(instance instanceof SubClass)//true

console.log(SubClass instanceof SuperClass)//false

从我们之前介绍的 instanceof 的原理我们知道，第三个 console 如果这么写就返回 true 了console.log(SubClass.prototype instanceof SuperClass)

虽然实现起来清晰简洁，但是这种继承方式有两个缺点：

• 由于子类通过其原型prototype对父类实例化，继承了父类，所以说父类中如果共有属性是引用类型，就会在子类中被所有的实例所共享，因此一个子类的实例更改子类原型从父类构造函数中继承的共有属性就会直接影响到其他的子类

• 由于子类实现的继承是靠其原型prototype对父类进行实例化实现的，因此在创建父类的时候，是无法向父类传递参数的。因而在实例化父类的时候也无法对父类构造函数内的属性进行初始化

构造函数继承

function SuperClass(id) {

this.books = [‘js’,‘css’];

this.id = id;

}

SuperClass.prototype.showBooks = function() {

console.log(this.books);

}

function SubClass(id) {

//继承父类

SuperClass.call(this,id);

}

//创建第一个子类实例

var instance1 = new SubClass(10);

//创建第二个子类实例

var instance2 = new SubClass(11);

instance1.books.push(‘html’);

console.log(instance1)

console.log(instance2)

instance1.showBooks();//TypeError

SuperClass.call(this,id)当然就是构造函数继承的核心语句了.由于父类中给this绑定属性，因此子类自然也就继承父类的共有属性。由于这种类型的继承没有涉及到原型prototype，所以父类的原型方法自然不会被子类继承，而如果想被子类继承，就必须放到构造函数中，这样创建出来的每一个实例都会单独的拥有一份而不能共用，这样就违背了代码复用的原则，所以综合上述两种，我们提出了组合式继承方法

组合式继承

function SuperClass(name) {

this.name = name;

this.books = [‘Js’,‘CSS’];

}

SuperClass.prototype.getBooks = function() {

console.log(this.books);

}

function SubClass(name,time) {

SuperClass.call(this,name);

this.time = time;

}

SubClass.prototype = new SuperClass();

SubClass.prototype.getTime = function() {

console.log(this.time);

}

如上，我们就解决了之前说到的一些问题，但是是不是从代码看，还是有些不爽呢？至少这个SuperClass的构造函数执行了两遍就感觉非常的不妥.

原型式继承

function inheritObject(o) {

//声明一个过渡对象

function F() { }

//过渡对象的原型继承父对象

F.prototype = o;

//返回过渡对象的实例，该对象的原型继承了父对象

return new F();

}

原型式继承大致的实现方式如上，是不是想到了我们new关键字模拟的实现？

其实这种方式和类式继承非常的相似，他只是对类式继承的一个封装，其中的过渡对象就相当于类式继承的子类，只不过在原型继承中作为一个普通的过渡对象存在，目的是为了创建要返回的新的实例对象。

var book = {

name:‘js book’,

likeBook:[‘css Book’,‘html book’]

}

var newBook = inheritObject(book);

newBook.name = ‘ajax book’;

newBook.likeBook.push(‘react book’);

var otherBook = inheritObject(book);

otherBook.name = ‘canvas book’;

otherBook.likeBook.push(‘node book’);

console.log(newBook,otherBook);

如上代码我们可以看出，原型式继承和类式继承一个样子，对于引用类型的变量，还是存在子类实例共享的情况。

所以，我们还有下面的寄生式继

寄生式继承

var book = {

name:‘js book’,

likeBook:[‘html book’,‘css book’]

}

function createBook(obj) {

//通过原型方式创建新的对象

var o = new inheritObject(obj);

// 拓展新对象

o.getName = function(name) {

console.log(name)

}

// 返回拓展后的新对象

return o;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-EmidSjKE-1712607017144)]

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

JavaScript

一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-Fve50By4-1712607017145)]