深入JS原型、原型链和继承

一、原型的理解

1.对象的原型

JavaScript当中每个对象都有一个特殊的内置属性[[prototype]] ,这个特殊的对象可以指向另外-一个对象。那么这个对象有什么用呢?

• 当我们通过引用对象的属性key来获取一个value时,它会触发[[Get]]的操作;
• 这个操作会首先检查该属性是否有对应的属性,如果有的话就使用它;
• 如果对象中没有改属性,那么会访问对象[[prototype]]内置属性指向的对象上的属性;

那么如果通过字面量直接创建一个对象,这个对象也会有这样的属性吗?如果有,应该如何获取这个属性呢?

答案是有的,只要是对象都会有这样的一个内置属性;

获取的方式有两种:

• 方式一 :通过对象的_ proto_ 属性可以获取到 (但是这个是早期浏览器自己添加的,存在一定的兼容性问题) ;
• 方式二:通过Object.getPrototypeOf方法可以获取到;

2.函数的原型

这里我们又要引入一个新的概念：

所有的函数都有一个prototype的属性 因为它是一个函数，才有了这个特殊的属性； 而不是它是一个对象，所以有这个特殊的属性；

3.constructor

事实上原型对象上面是有一个属性的：constructor
默认情况下原型上都会添加一个属性叫做constructor，这个constructor指向当前的函数对象

内存表现:

二、原型链

首先说一下:new关键字的步骤如下：

在内存中创建一个新的对象（空对象）； 这个对象内部的__proto__属性会被赋值为该构造函数的prototype属性
那么也就意味着我们通过Person构造函数创建出来的所有对象的__proto__属性都指向Person.prototype：

1.概念和理解

首先，从一个对象上获取属性，如果在当前对象中没有获取到就会去它的原型上面获取。这样，如果在这个对象内部没找到这个属性，就会往上去他的原型上去寻找，还没找到则继续去原型的原型对象上去寻找。

2.原型链中最顶层的原型

var obj1 = {};
var obj2 = new Object()
console.log(obj1.__proto__ === obj2.__proto__);//true
console.log(obj1.__proto__ === Object.prototype);//true
console.log(obj1.__proto__);//null
console.log(Object.getOwnPropertyDescriptors(Object.prototype))

console.log(obj1.proto);//null
实际上obj1.__proto__也就是Object.prototype并不是空，只是Object.prototype对象里面的可枚举属性设置成false了，我们可以通过Object.getOwnPropertyDescriptors(Object.prototype)去输出这些属性，有valueOf,toString函数等等。

从我们上面的Object原型我们可以得出一个结论：原型链最顶层的原型对象就是Object的原型对象

三、继承

1.原型链继承：

// 父类: 公共属性和方法
function Person() {
  this.name = "why"
  this.friends = []
}

Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}

// 子类: 特有属性和方法
function Student() {
  this.sno = 111
}

var p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}


// name/sno
var stu = new Student()

// console.log(stu.name)
// stu.eating()

// stu.studying()


// 原型链实现继承的弊端:
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
// console.log(stu.name)

// 2.第二个弊端: 创建出来两个stu的对象
var stu1 = new Student()
var stu2 = new Student()

// 直接修改对象上的属性, 是给本对象添加了一个新属性
stu1.name = "kobe"
console.log(stu2.name)

// 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("kobe")

console.log(stu1.friends)
console.log(stu2.friends)

// 3.第三个弊端: 在前面实现类的过程中都没有传递参数
var stu3 = new Student("lilei", 112)

原型链继承的弊端：

• 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
• 2.第二个弊端: 创建出来两个stu的对象
• 3.第三个弊端: 在前面实现类的过程中都没有传递参数

内存图：

2.借用构造函数继承：

做法：

在子类型构造函数的内部调用父类型构造函数. 因为函数可以在任意的时刻被调用；
因此通过apply()和call()方法也可以在新创建的对象上执行构造函数

实例：

// 父类: 公共属性和方法
function Person(name, age, friends) {
  // this = stu
  this.name = name
  this.age = age
  this.friends = friends
}

Person.prototype.eating = function() {
  console.log(this.name + " eating~")
}

// 子类: 特有属性和方法
function Student(name, age, friends, sno) {
  Person.call(this, name, age, friends)
  // this.name = name
  // this.age = age
  // this.friends = friends
  this.sno = 111
}

var p = new Person()
Student.prototype = p

Student.prototype.studying = function() {
  console.log(this.name + " studying~")
}


// name/sno
var stu = new Student("why", 18, ["kobe"], 111)

// console.log(stu.name)
// stu.eating()

// stu.studying()


// 原型链实现继承已经解决的弊端
// 1.第一个弊端: 打印stu对象, 继承的属性是看不到的
console.log(stu)

// 2.第二个弊端: 创建出来两个stu的对象
var stu1 = new Student("why", 18, ["lilei"], 111)
var stu2 = new Student("kobe", 30, ["james"], 112)

// // 直接修改对象上的属性, 是给本对象添加了一个新属性
// stu1.name = "kobe"
// console.log(stu2.name)

// // 获取引用, 修改引用中的值, 会相互影响
stu1.friends.push("lucy")

console.log(stu1.friends)
console.log(stu2.friends)

// // 3.第三个弊端: 在前面实现类的过程中都没有传递参数
// var stu3 = new Student("lilei", 112)

内存图：

弊端：

1.第一个弊端: Person函数至少被调用了两次
2.第二个弊端: 可以看到，p对象的几个属性都是undefined,即stu的原型对象上会多出一些属性, 但是这些属性是没有存在的