一、原型的理解

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 = pStudent.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 = stuthis.name = namethis.age = agethis.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 = friendsthis.sno = 111
}var p = new Person()
Student.prototype = pStudent.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)