原型和继承

简介

面向对象的6个概念：对象（实例）、类、封装、继承、多态、聚合。

js中没有类的概念，它是基于对象（构造函数和原型对象）扩展新的对象。 

封装：将独立属性放在构造函数里，共享部分放在原型上。节省内存，让实例对象保持独立。

构造函数：构造函数和普通函数一样，不同在于通过new来执行得到一个对象，并且默认返回this，this指向新创建的对象。

通过构造函数创建一个对象：

function Person (name) {
    this.name = name;
}
Person.prototype.sayName = function () {
    alert(this.name)
}
var p1 = new Person('Tom', 10);
//p1:'Tom',10;__proto__: sayName

有以下关系存在： 

p1.__proto__ === Person.prototype // true
Person.prototype.constructor === Person //true
p1.constructor === Person.prototype.constructor //true

 

三个重要属性

_proto_

对象独有。指向对应的构造函数的原型也就是prototype属性。

作用：访问一个对象的属性时，就会现在对象自身（私有属性）寻找，如果没有就会在它的_proto_属性所指向的原型对象找，一直到Object.protoytpe对象，此时还没有就返回undefined。（原型链查找）

原型链简单来说就是通过_proto_连接对象直到null的一条链。

p1----->Person.prototype----->Object.prototype----->null

js中一切皆为对象，都能基于_proto_原型链找到Object.protoytpe原型，都是内置类Object的一个实例（对象）。

 

prototype

函数独有。指的是函数的原型对象。

作用：包含实例共享的属性和方法（公有属性或方法）。

Object.prototype.__proto__ === null  // true

 

constructor

对象独有。指的是对象的构造函数。原型对象中默认存在的内置属性，指向构造函数本身。

 

内置（类）对象构造函数

Number / String / Boolean / Object/ Array / Date / Funtion / RegExp / Error

console.log(Person.__proto__ === Function.prototype);//true
console.log(Number.__proto__ === Function.prototype);//true
console.log(String.__proto__ === Function.prototype);//true
console.log(Boolean.__proto__ === Function.prototype);//true
console.log(Date.__proto__ === Function.prototype);//true
console.log(Array.__proto__ === Function.prototype);//true
console.log(Error.__proto__ === Function.prototype);//true
console.log(RegExp.__proto__ === Function.prototype);//true

 

检测实例

p1 instanceof Person
// true
Person.prototype.isPrototypeOf(p1)
// true
p1.hasOwnProperty('name')
// true
p1.hasOwnProperty('sayName')
// false

实例 instanceof 类

检测实例是否属于某个类，只要类的原型出现在实例对象的原型链上就返回true，适用于数组或者正则等，不适用于检测基本数据类型

isPrototypeOf

检测某个proptotype对象和某个实例之间的关系

对象.hasOwnProperty(属性)

检测某个属性是否为实例对象的私有属性，不是对象的属性或者私有属性都返回false

属性 in 对象

不管公有属性或者私有属性，只要是对象的属性就返回true

attr in obj && !attr.hasOwnProperty(attr) 是对象的属性并且不是私有属性

 

继承

构造继承：在子类的构造函数中执行父类的构造函数并指向自身的this

        function Parent(name){
            this.name = name
        }
        Parent.prototype.getName = function(){
            return this.name
        }
        function Child (){
            Parent.call(this,'hello')
        }
        var child = new Child()
        console.log(child.name)  // hello   
        console.log(child.getName())  // child.getName is not a function
  

缺点：

不能继承父类原型上的方法和属性，只能继承父类实例属性和方法。

 

原型继承：把父类的实例当做子类的原型

        function Parent(){
            this.name = 'hello'
            this.hobbies = ['walking','music']
        }
        Parent.prototype.getName = function(){
            return this.name
        }
        function Child (){

        }
        // 让Child.prototype.constructor指向Parent
        Child.prototype = new Parent()
        Child.prototype.constructor = Child
        var child1 = new Child()
        var child2 = new Child()
        console.log(child1.name)  // hello
        console.log(child1.getName())  // hello
        child2.hobbies[0] = 'baseketball'
        console.log(child2.hobbies)  // ["baseketball", "music"]
        console.log(child1.hobbies)  // ["baseketball", "music"]
        

缺点：多个实例指向同一个原型，修改其中一个会影响其他的(包含引用类型值)；也不能向父类传参。

 

组合继承：结合原型继承和构造继承

        function Parent(name){
            this.name = name
            this.hobbies = ['walking', 'music']
        }
        Parent.prototype.getName = function(){
            return this.name
        }
        function Child (name){
            Parent.call(this, name)
        }
        // 让Child.prototype.constructor指向Parent
        Child.prototype = new Parent()
        Child.prototype.constructor = Child
        var child1 = new Child('hello')
        var child2 = new Child()
        console.log(child1.name)  // hello
        console.log(child1.getName())  // hello
        
        child2.hobbies[0] = 'baseketball'
        console.log(child2.hobbies)  // ["baseketball", "music"]
        console.log(child1.hobbies)  // ["walking", "music"]

 

寄生组合继承：避免了组合继承中每次都要实例化父类的缺陷

       function Parent(name){
            this.name = name
            this.hobbies = ['walking', 'music']
        }
        Parent.prototype.getName = function(){
            return this.name
        }
        function Child (name){
            Parent.call(this, name)
        }
        // 把new Parent改成 Parent.prototype
        // Child.prototype = Parent.prototype
        // 浅拷贝
        Child.prototype = Object.create(Parent.prototype)
        Child.prototype.constructor = Child
        var child1 = new Child('hello')
        var child2 = new Child()
        console.log(child1.name)  // hello
        console.log(child1.getName())  // hello

        child2.hobbies[0] = 'baseketball'
        console.log(child2.hobbies)  // ["baseketball", "music"]
        console.log(child1.hobbies)  // ["walking", "music"]

缺点：改动原型prototype要注意子类父类原型对象的相互影响，最终可以采用浅拷贝方式避免

 

ES6 class继承

直接通过extends来实现，并在子类中用super调用父类的构造方法。class的定义包含了构造函数constructor和定义在原型对象上的函数getName()。

        class Parent{
            constructor(name){
                this.name = name
            }
            getName() {
                return this.name
            }

        }
        class child extends Parent{
            constructor(name){
                super(name)   //用super调用父类的构造方法
            }
        }
        var child1 = new Parent('hello')
        console.log(child1.name) // hello

 

再补充...