JS 原型和原型链

原型和原型链

2.1 面试题

1. 如何准确判断一个变量是不是数组？
2. class 的原型本质，怎么理解？
    

2.2 知识点

1.class 和 继承

class 的本质是 function。

class People {
  constructor(name) {
    this.name = name;
  }
  say() {
    return `${this.name} say`;
  }
}

console.log(typeof People);	// function

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。
继承：使用 extends 关键字实现继承，具体使用可以看后面示例

2.类型判断 instanceof

class People {
  // ...
}
const person = new People('张三');
console.log(person instanceof People);	// true
console.log(person.__proto__ === People.prototype); // true

instanceof 原理：
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性，如这里的 person 是由 People 实例化所得，则 stu.__ proto __ === Student.prototype，在原型链上可以找到，因此返回true；
 

2.3 用 class 实现继承

1.class写法
2.继承（extends，super，扩展或重写方法）

class People {
  constructor(name) {
    this.name = name;
  }
  say() {
    return `${this.name} say`;
  }
}
class Teacher extends People {
  constructor(name, major) {
    super(name);
    this.major = major;
  }
  teach() {
    return `${this.name} teach ${this.major}`;
  }
}
class Student extends People {
  constructor(name, course) {
    super(name);
    this.course = course;
  }
  study() {
    return `${this.name} study ${this.course}`;
  }
}

const teacher = new Teacher('张三', '语文');
const student = new Student('李四', '英文');
console.log(teacher.name, '|' , teacher.say(), '|' , teacher.teach());
console.log(student.name, '|' , student.say(), '|' , student.study());

 

2.4 原型（隐式原型和显示原型）和原型链

1.原型

Javascript规定，每一个函数都有一个prototype对象属性。

首先来给 prototype 一个称呼：显示原型

这里补充一下：上面我们用的是 class 的方式实现继承，但是在 class 出现之前，使用的是另一种写法

function People(name) {
    this.name = name;
    this.say = function () {
      return `${this.name} say`;
    }
}
const people = new People('people');
console.log(people.say());

（至于这种方式的继承方法，由于方式较多，在文章的最后给出，见附1）
 

当通过 new 来实例化一个构造函数时（创建实例对象），每个实例对象都会有 proto 这样一个内置属性，用于指向创建它的函数对象的原型对象prototype。

class People {
	// ...
}
const people = new People('张三');
// 实例对象 student 的 __proto__ 指向创建它的函数对象（Student）的原型对象prototype
people.__proto__ === People.prototype	// true

同样的，给 proto 一个称呼：隐式原型

2.原型链

实例对象与原型之间的连接，叫做原型链，通过 __ proto __ 连接。

可以确定，每个对象都有一个 __ proto __ 属性

当访问一个对象的属性或者方法时，如果此对象没有，那么就会沿着 proto 继续到上一个对象中继续查找，如此重复，直到该原型链的尽头。（另外：如果想判定本对象有没有该属性或方法，可以用 hasOwnProperty 来进行判断）

instanceof 原理就是依照原型链来查找，找到了返回 true ，否则返回 false。

注：这里的 people.proto === People.prototype ，其实根据原型链，还可以继续向上找，就像这样：People.prototype.proto === Object.prototype，可以自行打印出来看看。

2.5 题目解答

1.如何准确判断一个变量是不是数组？

const arr = [1, 2, 3];
console.log(arr instanceof Array);  // true
console.log(Array.isArray(arr));    // true 推荐使用

2.class 的原型本质，怎么理解？
class 的本质是 function。它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。