一、原型的理解

1.对象的原型

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

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

获取的方式有两种:

2.函数的原型

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

3.constructor

内存表现:
在这里插入图片描述

二、原型链

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

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)

原型链继承的弊端：

内存图：
在这里插入图片描述

2.借用构造函数继承：

做法：

实例：

// 父类: 公共属性和方法
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)

内存图：
在这里插入图片描述

弊端：

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

文章目录