下班前几分钟，我彻底弄懂了JavaScript的原型与原型链

Fn.prototype = {

// prototype对象里面又有其他的属性

showName: function(){

console.log("My name is " + this.name);

},

showAge: function(){

console.log(“I’m " + this.age + " years old”);

}

}

let obj = new Fn(‘leo’,18)

/*

当访问一个对象的属性时，如果该对象本身不存在这个属性，

那么就会去它的构造函数的prototype属性中去找

*/

obj.showName(); // My name is leo

obj.showAge(); // I’m 18 years old

这就是原型，很好理解。那为什么要使用原型呢？

试想如果我们要通过 Fn() 来创建多个对象，会这么写

function Fn(name,age){

this.name =name;

this.age = age;

this.showName = function(){

console.log("My name is " + this.name);

},

this.showAge = function(){

console.log(“I’m " + this.age + " years old”);

}

}

那么我们创建出来的每一个对象，里面都会包含showName和showAge方法，这样就会占用很多的资源。而通过原型来实现的话，只需要在构造函数里面给 prototype 属性赋值，把扩展的方法写在Fn.prototype 属性里面，这样通过该构造函数构造出来的每个对象都可以使用 prototype 属性里面的 showName、showAge 方法，节省了不少资源。

原型链

理解了原型，那么原型链就很好理解了。

由第5点可知，当访问一个对象的属性时，如果该对象本身不存在这个属性，那么就会去它构造函数的“prototype”属性（即原型）中去寻找，又因为“prototype”属性也是一个对象，所以它也有一个“__proto__”属性

// 定义一个构造函数

function Foo(name,age){

this.name = name;

this.age = age;

}

Object.prototype.toString = function(){

console.log(“My name is " + this.name + " And I’m " + this.age + " years old”);

}

let fn = new Foo(‘leo’,18);

fn.toString(); // My name id leo And I’m 18 years old

console.log(fn.proto === Foo.prototype); // true

console.log(Foo.prototype.proto === Object.prototype); // true

console.log(fn.toString === Foo.prototype.proto.toString); // true

// 原型链机制（层层往上找），fn.toString实际访问的是Object.prototype.toString

console.log(fn.toString === Object.prototype.toString); // true

console.log(Object.prototype.proto === null); // true

由上面的例子，得到如下图（图片来源网络）

1、fn 实例的构造函数是 Foo()，因此

fn.__ proto__ === Foo.prototype

2、Foo.prototype 也是一个对象（拥有 __proto__ 属性），它的构造函数是 Object()，因此

Foo.prototype.proto === Object.prototype

3、toString() 是在 Object.prototype 里面的，当调用的对象本身不存在该方法时，它会一层一层地往上去找，一直到null为止。

4、fn 调用 toString() 时，发现 fn 本身没有这个方法，于是就去 Foo.prototype 中找，发现还是没有，然后继续往 Object.prototype 中找，找到了，就调用 Object.prototype 中的 toString() 方法。

这就是原型链，fn 能够调用 Object.prototype 中的方法正是因为原型链的机制。

注意：在使用原型的时候，一般推荐将需要扩展的方法写在构造函数的 prototype 属性中。

理解了上面的例子之后，我们再来看以下这个图（图片来源网络）

结合上面的例子进行分析

fn：自定义对象

Foo：自定义函数

1、自定义函数（new） --> 自定义对象

let fn = new Foo(‘leo’,18);

2、自定义对象 （__proto__）–> 自定义函数原型

fn.__ proto__ === Foo.prototype

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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