js必考知识点，原型与原型链，继承的几种方式

原型与原型链

• __proto__原型链,prototype（原型对象），所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
• 每个函数都有一个prototype属性，可以称之为显式原型属性。
• 每个对象的实例对象都有一个__proto__属性，可以称之为隐式原型属性。
• 实例对象的隐式原型的值和其构造函数的显式原型的值所对应。

//每一个函数都有自己的prototype也就是显示原型
//每一个对象的实例对象都有自己的原型链__proto__也就是隐式原型
//实例对象的隐式原型的值指向函数的显示原型的值

function A(name){
    this.name = name 
}
var B = new A()
 B.__proto__ === A.prototype

来几道笔试题加深理解

// 定义构造函数
function C () {}
function D () {}
// 实例化一个 o 对象
var o = new C()
// true，true --> C.prototype 在 o 的原型链上
console.log(o instanceof C, o.__proto__ === C.prototype, '此时 o 的 __proto__：', o.__proto__, '此时 C 的 prototype：', C.prototype)

// false，false --> D.prototype 不在 o 的原型链上
console.log(o instanceof D, o.__proto__ === D.prototype)

// true true --> Object.prototype 在 o 的原型链上
console.log(o instanceof Object, o.__proto__.__proto__ === Object.prototype)

// 这时我们修改构造函数 C 的原型为一个空对象
C.prototype = {}
// 实例化一个 o2 对象
var o2 = new C()
// true --> C.prototype 在 o2 的原型链上
console.log(o2 instanceof C)
// false，C.prototype 指向了一个空对象,这个空对象不在 o 的原型链上.
console.log(o instanceof C, '此时 o 的 __proto__：', o.__proto__, '此时 C 的 prototype：', C.prototype)
console.log('此时 D 的 prototype：', D.prototype);
// 继承
D.prototype = new C()
console.log('此时 D 的 prototype：', D.prototype);
var o3 = new D()
// true, true --> 因为 o3 是 构造函数 D new 出来的实例对象，所以 D.prototype 一定在 o3 的原型链上
console.log(o3 instanceof D, o3.__proto__ === D.prototype)
// true --> 因为 C.prototype 现在在 o3 的原型链上
console.log(o3 instanceof C)
// true,true --> 上面的结果为什么为 true 呢，看如下代码，D.prototype 是 构造函数 C new 出来的实例对象，所以 C.prototype 一定在 D.prototype 的原型链上
console.log(o3.__proto__ === D.prototype, D.prototype.__proto__ === C.prototype);
// true 相当于如下代码
console.log(o3.__proto__.__proto__ === C.prototype);

手写实现继承的几种方式

• 1.构造函数继承

function Parent(name) {
   this.info = { name: name };
}
function Child(name) {
   //继承自Parent，并传参
   Parent.call(this, name);
   
    //实例属性
   this.age = 18
}

let child1 = new Child("yhd");
console.log(child1.info.name); // "yhd"
console.log(child1.age); // 18

let child2 = new Child("wxb");
console.log(child2.info.name); // "wxb"
console.log(child2.age); // 18

• 2.原型链继承

function Parent() {
   this.isShow = true
   this.info = {
       name: "yhd",
       age: 18,
   };
}

Parent.prototype.getInfo = function() {
   console.log(this.info);
   console.log(this.isShow); // true
}

function Child() {};
Child.prototype = new Parent();

let Child1 = new Child();
Child1.info.gender = "男";
Child1.getInfo();  // {name: "yhd", age: 18, gender: "男"}

let child2 = new Child();
child2.getInfo();  // {name: "yhd", age: 18, gender: "男"}
child2.isShow = false

console.log(child2.isShow); // false

• 3.组合继承

function Parent(name) {
   this.name = name
   this.colors = ["red", "blue", "yellow"]
}
Parent.prototype.sayName = function () {
   console.log(this.name);
}

function Child(name, age) {
   // 继承父类属性
   Parent.call(this, name)
   this.age = age;
}
// 继承父类方法
Child.prototype = new Parent();

Child.prototype.sayAge = function () {
   console.log(this.age);
}

let child1 = new Child("yhd", 19);
child1.colors.push("pink");
console.log(child1.colors); // ["red", "blue", "yellow", "pink"]
child1.sayAge(); // 19
child1.sayName(); // "yhd"

let child2 = new Child("wxb", 30);
console.log(child2.colors);  // ["red", "blue", "yellow"]
child2.sayAge(); // 30
child2.sayName(); // "wxb"

最后也是全文最重要的，码字不易，你的鼓励是我持之以恒的动力，欢迎关注点赞搜藏，我会定时输送全栈技术干货！！！