秒はJavaScriptの継承と実現方式を理解します.

8979 ワード

1、継承する
コンセプト:オブジェクトは別のオブジェクトのメンバーにアクセスできます.javascriptでは、オブジェクトとオブジェクトの間にプロトタイプ属性によってメンバーと方法の共有(引き継ぎ)が行われます.
function Animal(name){
    this.name = name
}
Animal.prototype.eat=function(){
    console.log(this.name + 'can eat other small animals .')
}
var animal1 = new Animal('snake')
var animal2 = new Animal('tiger')
animal1.eat===animal2.eat  //true
//animal1.eat animal2.eat    Animal.prototype.eat ,      (  )
2、原型継承の原理
プロトタイプ:関数のプロトタイプ属性が参照するオブジェクトプロトタイプ継承の原理です.オブジェクトはプロト属性が指すオブジェクト上のメンバーと方法にアクセスできます.
var a = {}
//    :a -> Object.prototype ->null
// a.hasOwnProperty       Object.prototype  hasOwnProperty  。  a     hasOwnProperty  , a.__proto__     Object.prototype , Object.prototype  hasOwnProperty  
3、プロトタイプチェーン
コンセプト:jsはオブジェクトを作成する際に、プロトという内蔵属性があります.作成した関数のオブジェクトを指すプロトタイプオブジェクトのプロトタイプオブジェクトを、プロトのあるオブジェクトに連結して、Object.prototypeからnullまでのチェーンをプロトタイプチェーンといいます.本質:チェーン上の各オブジェクトは、プロト属性によって連結されています.
...js
var a = {};
//   :a -> Object.prototype  -> null
var arr=[];
//   :arr -> Array.prototype -> Object.prototype -> null
function Person(){}
var p1 = new Person()
//   :p1 -> Person.prototype  -> Object.prototype  -> null
...
4、js継承の実現方式
function Person(name,age){
    this.name = name
    this.age = age
}
Person.prototype.run = function(){
    console.log(this.name + 'can run !')
}
(1)シンプルな原型継承
    var p1 = new Person('Jeck',23)
    var p2 = new Person('Rose',22)
    p1.run === p2.run //true
    // p1   p1      Person.prototype  run  
(2)置換原型継承
Person.prototype = {
    eat:function(){
        console.log(this.name + 'can eat !')    
    }
}
var p1 = new Person('Jeck',23)
var p2 = new Person('Rose',22)
p1.eat === p2.eat //true
// p1   p1      Person.prototype  eat  
(3)拡張プロトタイプ継承
function Child(name.age){
    this.name = name
    this.age = age
}
//IE8     Object.create()  
//    
if(!Object.create){
    Object.create = function(Person.prototype){
        function F(){}
        F.prototype = Person.prototype
        return new F()
    }
}
Child.prototype = Object.create(Person.prototype)
//     Child.prototype  Person.prototype  new   
var c = new Child('lili',12)
//      :
//c -> Child.prototype -> Person.prototype -> Object.prototype -> null
c.run;  //     Person.prototype  run  
(4)コピー式継承
function extend(o1,o2){
    for(key in o2){
    if(o2.hasOwnProperty(key)){
        o1[key]=o2[key]
    }
    }
}
var o1 = {
name:'tom',
sing:function(){
    console.log(this.name +'can sing !')
}
}
var o2 = {
    name:'lily',
    jump:function(){
        console.log(this.name +'can jump high !')
    }
}
extend(o1,o2)
o1.jump()  
// lilycan jump high !   tomcan jump high !
(5)対象者が成りすまして式を継承する
    function Child(name,age,gender){
        this.parent = Person
        this.parent(name,age)
        delete this.parent
        this.gender = gender
    }
    var c = new Child('meimei',20,'femail')
    console.log(c)
    //{name:'meimei',age:20,gender:'femail'}
(6)コンビネーション引継ぎ
function Child(name,age){
    Person.call(this,name,age)
    //   Person.apply(this,arguments)
}
Child.prototype = new Person()
var c = new Child('qq','sweet')
c.run();//qq can run !
//     :
// c -> Child.prototype -> Person.prototype -> Object -> null