javaScript面向对象编程设计(四)

一。继承

很对OO语言支持两种继承方式。 即接口继承和实现继承。 接口继承只继承方法签名，而实现继承则继承实际的方法，由于在javasc中函数没有签名，所以只有实现继承。

二。原型链继承

所谓原型继承的思想就是利用原型让一个引用类型继承另一个引用类型的属性和方法。由于每一个构造函数都有一个原型对象 而原型对象里包含着一个指向构造函数的指针。而实例对象有包含了一个指向原型对象内部的指针。这样一来可以让一个原型对象等于另一个实例对象 此时原型这个原型对象就包含了一个指向另一个原型对象的指针。相应的让另一个原型对象也指向下一个实例对象向这样层层递进的关系构成了原型的链条。 这就是所谓的原型链。

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}

School.prototype = new Person()

School.prototype.getCity = function(){
    return `${this.name}------${this.city}`
}
let school = new  School()

console.log(school)
console.log(school.name)
console.log(school.city)
console.log(school.getNMae())
console.log(school.getCity())

Person { city: '成都市', year: '2020-2-3' }
jack
成都市
jack
jack------成都市

• 默认原型

所有的引用类型都默认继承了Object，而这个这个也是通过原型链继承的。特别要走注意的是所有的函数默认继承的也是Object的实例。所以默认原型都会包含一个内部指针。指向Object.prototype。这也是所有自定义的引用类型都可以使用valueOf()方法的原因。

• 使用instanceof确定原型和实例之间的关系

instanceof操作符可以测试实例与原型链中出现过的构造函数。结果会返回一个布尔值 

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}

School.prototype = new Person()

School.prototype.getCity = function(){
    return `${this.name}------${this.city}`
}
let school = new  School()

console.log(school instanceof  Object)
console.log(school instanceof  School)
console.log(school instanceof  Person)


true
true
true

由于school的关系可以说school是以上三个构造函数中的任意一个实例所以结果返回true

• 使用isPrototypeOf()方法确定实例与原型之间的关系。 

只要是原型链中出现过的原型都可以说是该原型链所派成的实例对象

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}

School.prototype = new Person()

School.prototype.getCity = function(){
    return `${this.name}------${this.city}`
}
let school = new  School()

console.log(Object.prototype.isPrototypeOf(school))
console.log(School.prototype.isPrototypeOf(school))
console.log(Person.prototype.isPrototypeOf(school))


true
true
true

• 定义方法时要谨慎

子类有时候可能会重写超类中的方法或者需要添加超类中不存在的方法。无论如何都要都要放在替换原型之后，错误的写法

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}

School.prototype.getCity = function(){
    return `${this.name}------${this.city}`
}
School.prototype.getNMae =  function(){
    return "这个是重写超类的方法"
}

School.prototype = new Person()

let school = new  School()

console.log(school.getNMae())
console.log(school.getCity())


/Users/apple/Documents/js/js.js:27
console.log(school.getCity())
                   ^

TypeError: school.getCity is not a function
    at Object.<anonymous> (/Users/apple/Documents/js/js.js:27:20)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

正确的写法

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}


School.prototype = new Person()

School.prototype.getCity = function(){
    return `${this.name}------${this.city}`
}
School.prototype.getNMae =  function(){
    return "这个是重写超类的方法"
}

let school = new  School()

console.log(school.getNMae())
console.log(school.getCity())

这个是重写超类的方法
jack------成都市

• 在使用原型链继承时。不能使用对象的字面量创造的原型的方法。因为这样会重写原型链

function Person() {
    this.name = "jack";
    this.age = 23
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
    this.year = '2020-2-3'
}


School.prototype = new Person()

School.prototype = {
    getCity : function(){
        return  false
    }
}

let school = new  School()

console.log(school.getNMae())
console.log(school.getCity())

console.log(school.getNMae())
                   ^

TypeError: school.getNMae is not a function
    at Object.<anonymous> (/Users/apple/Documents/js/js.js:26:20)
    at Module._compile (internal/modules/cjs/loader.js:1156:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1176:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:74:12)
    at internal/main/run_main_module.js:18:47

三。原型链继承的问题

• 引用类型共享的问题

function Person() {
    this.name = "jack";
    this.age = 23;
    this.year = ["2020", '2021']
}

Person.prototype.getNMae = function () {
    return this.name
}

function School() {
    this.city = "成都市";
}


School.prototype = new Person()

let school = new  School()

let school1 = new School()


console.log(school.year)
school.year.push(...['2043', '2405'])
console.log(school1.year)
console.log(school1.year)

[ '2020', '2021' ]
[ '2020', '2021', '2043', '2405' ]
[ '2020', '2021', '2043', '2405' ]

• 在创建子类的实例时，不能像超类的构造函数中传递参数。实际上应该说没有办法在不影响所有对象实例的情况下，给超类型型的构造函数传递参数。