js.jpg
Javascript是面向对象的，对象的继承是非常重要的属性
原型链的继承
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student (price) {
this.price = price
this.setScore = function () {}
}
Student.prototype = new Person()
var s1 = new Student(100)
var s2 = new Student(1000)
console.log (s1, s2)
结果如下：
360截图20200405192918075.jpg
这样，子类就可以通过proto访问父类的实例了。子类继承父类的方法和属性并将父类的方法和属性都作为自己的共有属性和方法，这样一来有一个问题，这些都是引用类型，s1操作父类的属性和方法的时候就会影响s2
s1.__proto__.play.push(4)
s2.__proto__.play // [1, 2, 3, 4]
子类如果需要添加新的属性或者方法的时候，需要添加在原型替换之前，不然不会生效
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student (price) {
this.price = price
this.setScore = function () {}
}
Student.prototype.sayHello = function(){}
Student.prototype = new Person()
var s1 = new Student(200)
image.png
s1上并没有sayHello方法
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student (price) {
this.price = price
this.setScore = function () {}
}
Student.prototype = new Person()
Student.prototype.sayHello = function(){}
var s1 = new Student(200)
image.png
总结：
父类上新增的原型无论是方法还是属性皆可访问
缺点
- 无法实现多继承
- 父类的所有属性被所有实例共享且可改变
- 创建子类实例时，无法向父类传参
构造函数继承
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student (name, age, price) {
Person.apply(this, [name, age])
this.price = price
}
var s1 = new Student('zhangsan', 25, 10000)
image.png
image.png
特性
- 解决了子类实例共享父类引用属性的问题
- 创建子类的实例时，可以向父类传参
- 可以实现多继承
缺点
- 只能继承父类的实例属性和方法，不能继承父类原型属性和方法
- 无法实现父类的函数福永，每个子类都有自己的父类实例函数
原型链 + 构造函数组合继承
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setName = function () {
console.log(this.name)
}
function Student (name, age, price) {
Person.apply(this, [name, age])
this.price = price
this.setScore = function () {}
}
Student.prototype = new Person()
Student.prototype.constructor = Student
Student.prototype.sayHello = function () {}
var s1 = new Student('zhangsan', 25, 10000)
var s2 = new Student('lisi', 26, 150000)
var p1 = new Person('wangwu', 20)
image.png
特点
- 可以继承实例的属性和方法，也可以继承原型的属性和方法
- 不存在引用属性共享问题
- 可传参
- 函数可复用
缺点
- 调用了两次父类构造函数，生成了两份实例
组合继承优化
子类和父类的原型指向同一对象，子类可以继承父类的共有方法作为自己的共有方法，不再初始化两次实例方法或者属性
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setName = function () {
console.log(this.name)
}
function Student (name, age, price) {
Person.apply(this, [name, age])
this.price = price
this.setScore = function () {}
}
Student.prototype = Person.prototype
Student.prototype.sayHello = function () {}
var s1 = new Student('chris', 30, 30000)
image.png
缺点
无法识别实例时子类还是父类创造，因为子类和父类的构造函数指向是同一个
组合优化2
基于已有的对象来创建对象，var b = Object.create(A)，以A为原型生成B对象，B就继承了A的所有属性和方法
function Person(name, age) {
this.name = name
this.age = age
this.play = [1, 2, 3]
this.setName = function () {}
}
Person.prototype.setName = function () {
console.log(this.name)
}
function Student (name, age, price) {
Person.apply(this, [name, age])
this.price = price
this.setScore = function () {}
}
Student.prototype = Object.create(Person.prototype)
Student.prototype.construtor = Student
var s1 = new Student('paul', 27, 20000)
image.png
ES6中的继承
ES6引入了class关键字，class可通过extends关键字实现继承,还可以用过static定义静态方法
class Person {
constructor (name, age) {
this.name = name
this.age = age
}
showName () {
console.log('调用父类的方法')
}
}
let p1 = new Person ('chris', 20)
console.log(p1)
class Student extends Person {
constructor (name, age, prise) {
super(name, age)
this.prise = prise
}
showName () {
console.log('调用子类的方法')
}
}
let s1 = new Student ('zhang', 27, 20000)
console.log(s1)
s1.showName()
// Person {name: "chris", age: 20}
// Student {name: "zhang", age: 27, prise: 20000}
// 调用子类的方法
