前端基础进阶（十一）：详解面向对象、构造函数、原型与原型链(3)

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

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

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

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

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

关于构造函数，如果你暂时不能够理解new的具体实现，就先记住下面这几个结论吧。

• 与普通函数相比，构造函数并没有任何特别的地方，首字母大写只是我们约定的小规定，用于区分普通函数；

• new关键字让构造函数具有了与普通函数不同的许多特点，而new的过程中，执行了如下过程：

1. 声明一个中间对象；

2. 将该中间对象的原型指向构造函数的原型；

3. 将构造函数的this，指向该中间对象；

4. 返回该中间对象，即返回实例对象。

四、原型

虽然构造函数解决了判断实例类型的问题，但是，说到底，还是一个对象的复制过程。跟工厂模式颇有相似之处。也就是说，当我们声明了100个person对象，那么就有100个getName方法被重新生成。

这里的每一个getName方法实现的功能其实是一模一样的，但是由于分别属于不同的实例，就不得不一直不停的为getName分配空间。这就是工厂模式存在的第二个麻烦。

显然这是不合理的。我们期望的是，既然都是实现同一个功能，那么能不能就让每一个实例对象都访问同一个方法？

当然能，这就是原型对象要帮我们解决的问题了。

我们创建的每一个函数，都可以有一个prototype属性，该属性指向一个对象。这个对象，就是我们这里说的原型。

当我们在创建对象时，可以根据自己的需求，选择性的将一些属性和方法通过prototype属性，挂载在原型对象上。而每一个new出来的实例，都有一个__proto__属性，该属性指向构造函数的原型对象，通过这个属性，让实例对象也能够访问原型对象上的方法。因此，当所有的实例都能够通过__proto__访问到原型对象时，原型对象的方法与属性就变成了共有方法与属性。

我们通过一个简单的例子与图示，来了解构造函数，实例与原型三者之间的关系。

由于每个函数都可以是构造函数，每个对象都可以是原型对象，因此如果在理解原型之初就想的太多太复杂的话，反而会阻碍你的理解，这里我们要学会先简化它们。就单纯的剖析这三者的关系。

// 声明构造函数

function Person(name, age) {

this.name = name;

this.age = age;

}

// 通过prototye属性，将方法挂载到原型对象上

Person.prototype.getName = function() {

return this.name;

}

var p1 = new Person(‘tim’, 10);

var p2 = new Person(‘jak’, 22);

console.log(p1.getName === p2.getName); // true

图示

通过图示我们可以看出，构造函数的prototype与所有实例对象的__proto__都指向原型对象。而原型对象的constructor指向构造函数。

除此之外，还可以从图中看出，实例对象实际上对前面我们所说的中间对象的复制，而中间对象中的属性与方法都在构造函数中添加。于是根据构造函数与原型的特性，我们就可以将在构造函数中，通过this声明的属性与方法称为私有变量与方法，它们被当前被某一个实例对象所独有。而通过原型声明的属性与方法，我们可以称之为共有属性与方法，它们可以被所有的实例对象访问。

当我们访问实例对象中的属性或者方法时，会优先访问实例对象自身的属性和方法。

function Person(name, age) {

this.name = name;

this.age = age;

this.getName = function() {

console.log(‘this is constructor.’);

}

}

Person.prototype.getName = function() {

return this.name;

}

var p1 = new Person(‘tim’, 10);

p1.getName(); // this is constructor.

在这个例子中，我们同时在原型与构造函数中都声明了一个getName函数，运行代码的结果表示原型中的访问并没有被访问。

我们还可以通过in来判断，一个对象是否拥有某一个属性/方法，无论是该属性/方法存在于实例对象还是原型对象。

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.getName = function() {

return this.name;

}

var p1 = new Person(‘tim’, 10);

console.log(‘name’ in p1); // true

in的这种特性最常用的场景之一，就是判断当前页面是否在移动端打开。

isMobile = ‘ontouchstart’ in document;

// 很多人喜欢用浏览器UA的方式来判断，但并不是很好的方式

更简单的原型写法

根据前面例子的写法，如果我们要在原型上添加更多的方法，可以这样写：

function Person() {}

Person.prototype.getName = function() {}

Person.prototype.getAge = function() {}

Person.prototype.sayHello = function() {}

… …

除此之外，我还可以使用更为简单的写法。

function Person() {}

Person.prototype = {

constructor: Person,

getName: function() {},

getAge: function() {},

sayHello: function() {}

}

这种字面量的写法看上去简单很多，但是有一个需要特别注意的地方。Person.prototype = {}实际上是重新创建了一个{}对象并赋值给Person.prototype，这里的{}并不是最初的那个原型对象。因此它里面并不包含constructor属性。为了保证正确性，我们必须在新创建的{}对象中显示的设置constructor的指向。即上面的constructor: Person。

五、原型链

原型对象其实也是普通的对象。几乎所有的对象都可能是原型对象，也可能是实例对象，而且还可以同时是原型对象与实例对象。这样的一个对象，正是构成原型链的一个节点。因此理解了原型，那么原型链并不是一个多么复杂的概念。

我们知道所有的函数都有一个叫做toString的方法。那么这个方法到底是在哪里的呢？

先随意声明一个函数：

function add() {}

那么我们可以用如下的图来表示这个函数的原型链。

原型链

其中add是Function对象的实例。而Function的原型对象同时又是Object的实例。这样就构成了一条原型链。原型链的访问，其实跟作用域链有很大的相似之处，他们都是一次单向的查找过程。因此实例对象能够通过原型链，访问到处于原型链上对象的所有属性与方法。这也是foo最终能够访问到处于Object原型对象上的toString方法的原因。

基于原型链的特性，我们可以很轻松的实现继承。

六、继承

我们常常结合构造函数与原型来创建一个对象。因为构造函数与原型的不同特性，分别解决了我们不同的困扰。因此当我们想要实现继承时，就必须得根据构造函数与原型的不同而采取不同的策略。

我们声明一个Person对象，该对象将作为父级，而子级cPerson将要继承Person的所有属性与方法。

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.getName = function() {

return this.name;

}

首先我们来看构造函数的继承。在上面我们已经理解了构造函数的本质，它其实是在new内部实现的一个复制过程。而我们在继承时想要的，就是想父级构造函数中的操作在子级的构造函数中重现一遍即可。我们可以通过call方法来达到目的。

// 构造函数的继承

function cPerson(name, age, job) {

Person.call(this, name, age);

this.job = job;

}

原型的继承，只需要将子级的原型对象设置为父级的一个实例，加入到原型链中即可。

// 继承原型

cPerson.prototype = new Person(name, age);

// 添加更多方法

cPerson.prototype.getLive = function() {}

原型链

当然关于继承还有更好的方式。

七、更好的继承

假设原型链的终点Object.prototype为原型链的E(end)端，原型链的起点为S(start)端。

通过前面原型链的学习我们知道，处于S端的对象，可以通过S -> E的单向查找，访问到原型链上的所有方法与属性。因此这给继承提供了理论基础。我们只需要在S端添加新的对象，那么新对象就能够通过原型链访问到父级的方法与属性。因此想要实现继承，是一件非常简单的事情。

因为封装一个对象由构造函数与原型共同组成，因此继承也会分别有构造函数的继承与原型的继承。

假设我们已经封装好了一个父类对象Person。如下。

var Person = function(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.getName = function() {

return this.name;

}

Person.prototype.getAge = function() {

return this.age;

}

构造函数的继承比较简单，我们可以借助call/apply来实现。假设我们要通过继承封装一个Student的子类对象。那么构造函数可以如下实现。

var Student = function(name, age, grade) {

// 通过call方法还原Person构造函数中的所有处理逻辑

Person.call(this, name, age);

this.grade = grade;

}

// 等价于

var Student = function(name, age, grade) {

this.name = name;

this.age = age;

this.grade = grade;

}

原型的继承则稍微需要一点思考。首先我们应该考虑，如何将子类对象的原型加入到原型链中？我们只需要让子类对象的原型，成为父类对象的一个实例，然后通过__proto__就可以访问父类对象的原型。这样就继承了父类原型中的方法与属性了。

因此我们可以先封装一个方法，该方法根据父类对象的原型创建一个实例，该实例将会作为子类对象的原型。

function create(proto, options) {

// 创建一个空对象

var tmp = {};

// 让这个新的空对象成为父类对象的实例

tmp.proto = proto;

// 传入的方法都挂载到新对象上，新的对象将作为子类对象的原型

Object.defineProperties(tmp, options);

return tmp;

}

简单封装了create对象之后，我们就可以使用该方法来实现原型的继承了。

Student.prototype = create(Person.prototype, {

// 不要忘了重新指定构造函数

constructor: {

value: Student

}

getGrade: {

value: function() {

return this.grade

}

}

})

那么我们来验证一下我们这里实现的继承是否正确。

var s1 = new Student(‘ming’, 22, 5);

console.log(s1.getName()); // ming

console.log(s1.getAge()); // 22

console.log(s1.getGrade()); // 5

全部都能正常访问，没问题。在ECMAScript5中直接提供了一个Object.create方法来完成我们上面自己封装的create的功能。因此我们可以直接使用Object.create.

Student.prototype = create(Person.prototype, {

// 不要忘了重新指定构造函数

constructor: {

value: Student

}

getGrade: {

value: function() {

return this.grade

}

}

})

完整代码如下：

function Person(name, age) {

this.name = name;

this.age = age;

}

Person.prototype.getName = function() {

return this.name

}

Person.prototype.getAge = function() {

return this.age;

}

function Student(name, age, grade) {

// 构造函数继承

Person.call(this, name, age);

this.grade = grade;

}

// 原型继承

Student.prototype = Object.create(Person.prototype, {

// 不要忘了重新指定构造函数

constructor: {

value: Student

}

getGrade: {

value: function() {

return this.grade

}

}

})

var s1 = new Student(‘ming’, 22, 5);

console.log(s1.getName()); // ming

console.log(s1.getAge()); // 22

console.log(s1.getGrade()); // 5

八、属性类型

在上面的继承实现中，使用了一个大家可能不太熟悉的方法defineProperties。并且在定义getGrade时使用了一个很奇怪的方式。

getGrade: {

value: function() {

return this.grade

}

}

这其实是对象中的属性类型。在我们平常的使用中，给对象添加一个属性时，直接使用object.param的方式就可以了，或者直接在对象中挂载。

var person = {

name: ‘TOM’

}

在ECMAScript5中，对每个属性都添加了几个属性类型，来描述这些属性的特点。他们分别是

• configurable: 表示该属性是否能被delete删除。当其值为false时，其他的特性也不能被改变。默认值为true

• enumerable: 是否能枚举。也就是是否能被for-in遍历。默认值为true

• writable: 是否能修改值。默认为true

• value: 该属性的具体值是多少。默认为undefined

• get: 当我们通过person.name访问name的值时，get将被调用。该方法可以自定义返回的具体值是多少。get默认值为undefined

• set: 当我们通过person.name = 'Jake'设置name的值时，set方法将被调用。该方法可以自定义设置值的具体方式。set默认值为undefined

需要注意的是，不能同时设置value、writable 与 get、set的值。

我们可以通过Object.defineProperty方法来修改这些属性类型。

下面我们用一些简单的例子来演示一下这些属性类型的具体表现。

configurable

// 用普通的方式给person对象添加一个name属性，值为TOM

var person = {

name: ‘TOM’

}

// 使用delete删除该属性

delete person.name; // 返回true 表示删除成功

// 通过Object.defineProperty重新添加name属性

// 并设置name的属性类型的configurable为false，表示不能再用delete删除

Object.defineProperty(person, ‘name’, {

configurable: false,

value: ‘Jake’ // 设置name属性的值

})

// 再次delete，已经不能删除了

delete person.name // false

console.log(person.name) // 值为Jake

// 试图改变value

person.name = “alex”;

console.log(person.name) // Jake 改变失败

enumerable

var person = {

name: ‘TOM’,

age: 20

}

// 使用for-in枚举person的属性

var params = [];

for(var key in person) {

params.push(key);

}

// 查看枚举结果

console.log(params); // [‘name’, ‘age’]

// 重新设置name属性的类型，让其不可被枚举

Object.defineProperty(person, ‘name’, {

enumerable: false

})

var params_ = [];

for(var key in person) {

params_.push(key)

}

// 再次查看枚举结果

console.log(params_); // [‘age’]

writable

var person = {

name: ‘TOM’

}

// 修改name的值

person.name = ‘Jake’;

// 查看修改结果

console.log(person.name); // Jake 修改成功

// 设置name的值不能被修改

Object.defineProperty(person, ‘name’, {

writable: false

})

// 再次试图修改name的值

person.name = ‘alex’;

console.log(person.name); // Jake 修改失败

value

var person = {}

// 添加一个name属性

Object.defineProperty(person, ‘name’, {

value: ‘TOM’

})

console.log(person.name) // TOM

get/set

var person = {}

// 通过get与set自定义访问与设置name属性的方式

文末

逆水行舟不进则退，所以大家要有危机意识。

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

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

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

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

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

前端面试题汇总

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

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

Object.defineProperty(person, ‘name’, {

value: ‘TOM’

})

console.log(person.name) // TOM

get/set

var person = {}

// 通过get与set自定义访问与设置name属性的方式

文末

逆水行舟不进则退，所以大家要有危机意识。

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

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

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

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

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

前端面试题汇总

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-JL70qTXe-1713064805523)]

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