秒はJavaScriptの継承と実現方式を理解します.
8979 ワード
1、継承する
コンセプト:オブジェクトは別のオブジェクトのメンバーにアクセスできます.javascriptでは、オブジェクトとオブジェクトの間にプロトタイプ属性によってメンバーと方法の共有(引き継ぎ)が行われます.
プロトタイプ:関数のプロトタイプ属性が参照するオブジェクトプロトタイプ継承の原理です.オブジェクトはプロト属性が指すオブジェクト上のメンバーと方法にアクセスできます.
コンセプト:jsはオブジェクトを作成する際に、プロトという内蔵属性があります.作成した関数のオブジェクトを指すプロトタイプオブジェクトのプロトタイプオブジェクトを、プロトのあるオブジェクトに連結して、Object.prototypeからnullまでのチェーンをプロトタイプチェーンといいます.本質:チェーン上の各オブジェクトは、プロト属性によって連結されています.
コンセプト:オブジェクトは別のオブジェクトのメンバーにアクセスできます.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