【亡羊补牢】JS灵魂之问 第17期 修炼内功 原型和原型链基础

引言

有几天没有更新JS灵魂之问的专栏系列文章了,秋招季,也在忙着备战笔试面试。今天得空再来写一篇文章,本篇要讲解的内容是关于 原型和原型链基础 ,那今天这篇看能不能问倒你了,一起来探索一下吧。

仰望星空的人,不应该被嘲笑

原型基础

原型 prototype 其实是 function对象的一个属性,但是打印出来结果它也是对象。


那我们直接看下面这个例子吧

function Foo(name,age){
  this.name = name;
  this.age = age;
}
Foo.prototype.sex = '男士'

var foo = new Foo('Chocolate',21);
console.log(foo.name); // Chocolate
console.log(foo.sex); // 男士

拓展:prototype是定义构造函数构造出的每个对象的公共祖先,所有被该构造函数构造出的对象都可以继承原型上的属性和方法。

原型的作用,如上述代码一样,将一些配置项写在构造函数里,对于一些写死的值或者方法,就可以直接挂载到原型上去,可以减少代码冗余。

知识点补充:

实例的 __proto__其实就是一个容器,就是为了在对象里面给 prototype设置一个键名。

来一道简单题吧,会输出什么?

function Car() { };
Car.prototype.name = 'Math';
var car = new Car();
Car.prototype.name = 'Benz';
console.log(car.name);

答案是 Benz,相当于进行了一次覆盖操作。

现在,我进行一点点修改,看看又会输出什么?

Car.prototype.name = 'Benz';

function Car() { };
var car = new Car();

Car.prototype = {
  name: 'Math'
}
console.log(car.name);

答案是 Benz,实例化一个car对象,首先car.name先去找构造函数找对应 name 属性,没有找到,然后就去原型对象上去找,找到对应name值为 Benz,赋值。继续往下走,发现有对原型对象重定义的操作,但是此时实例对象早就通过原本构造函数 new出来了。(简单来说,就是再定义了一个 prototype,但是没有实例化)

可能不太好理解上述表达,我们对上述代码修改一丢丢,看看又会打印什么?

Car.prototype.name = 'Benz';

function Car() {};
Car.prototype = {
  name: 'Math'
}
var car = new Car();

console.log(car.name);

答案是 Math,因为你此时重新定义了构造函数的 prototype,并且进行了实例化。

可能你会想到这个例子,这里只是更改了属性,并不是重写

function Car() { };
Car.prototype.name = 'Math';
var car = new Car();
Car.prototype.name = 'Benz';
console.log(car.name);

原型链基础

下面我们就要开始讲解原型链相关了,直接看下面这个例子吧:

Professor.prototype.tSkill = 'Java';
function Professor(){}
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
  this.mSkill = 'js';
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'html';
}

var student = new Student();

console.log(student);

原型链就是像如下例子,沿着 __protp__这条线往上找相应的原型的属性值的链条,这就是原型链。

补充,原型本身也有原型,但是原型链不可能一直链接,因此,会有一个顶端。原型链的顶端Object.prototype。因为Object也是有原型的。并且 Object.prototype保存了一个 toString()方法。

继续,我们对上述代码进行一点修改,然后我们修改student实例对象里面的属性值,看是否teacher实例对象也会发生变化?

Professor.prototype.tSkill = 'Java';
function Professor(){}
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
  this.mSkill = 'js';
  this.success = {
    alibaba: '28',
    tencent: '30'
  }
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'html';
}

var student = new Student();
student.success.baidu = '100';
student.success.tencent = '50';
console.log(teacher,student);

结果:

上述问题明白之后,我们再来看看下面这道题,看看又会有什么变化?

Professor.prototype.tSkill = 'Java';
function Professor(){}
var progessor = new Professor();

Teacher.prototype = progessor;
function Teacher(){
  this.mSkill = 'js';
  this.students = 500;
}
var teacher = new Teacher();

Student.prototype = teacher;
function Student(){
  this.pSkill = 'html';
}

var student = new Student();
console.log(student.students);
student.students++;
console.log(student, teacher);


从结果我们发现,只有 student实例对象底下的 students变成了 501,而 teacher 实例对象下面的 students没有变化。因为对于原始值而言, student对象底下没有 students这个属性,于是就会创建一个,然后自加。上一题是拿到了引用地址,于是可以修改,这道题意思和如下代码类似:

let obj = {
	name: 'Chocolate'
}
obj.age = 21; // obj没有age属性,于是创建一个。
console.log(obj.age); 

注意,一般不推荐按照如上两种方式修改原型对象上的属性值,后文会详细介绍继承的方式,这里只是抛砖引玉。

继续,看下一题,一道经典的笔试题:

function Car(){
  this.brand = 'Benz';
}
Car.prototype = {
  brand: 'Mazda',
  intro: function(){
    console.log('我是' + this.brand + '车');
  }
}
var car = new Car();
car.intro();

答案是 我是Benz车,首先new出来一个实例对象,然后访问实例的 intro()方法,发现没找到,于是会沿着原型链往上找,发现存在,然后打印。关键是 this.brand,因为 this会指向这个实例,实例访问的话,会首先访问由对应构造函数实例出来的对象,发现存在,直接打印。

最后

文章产出不易,还望各位小伙伴们支持一波!

往期精选:

小狮子前端の笔记仓库

访问超逸の博客,方便小伙伴阅读玩耍~

学如逆水行舟,不进则退
一百个Chocolate CSDN认证博客专家 CSDN博客专家 博客之星 前端开发攻城狮
JS,TS,LeetCode,Vue,React,算法爱好者。
主要分享前端知识,立志成为优秀前端博主。
座右铭:学如逆水行舟,不进则退!
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值