秒懂JavaScript繼承和實(shí)現(xiàn)方式

2019-11-08 02:20:17

字體：大中小

供稿：網(wǎng)友

1、繼承

概念:一個對象可以訪問另一個對象上的成員。在javascript，對象與對象之間是通過PRototype屬性來實(shí)現(xiàn)成員和方法的共享(繼承)。

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 ,實(shí)現(xiàn)方法共享(繼承)

2、原型繼承的原理

原型:就是函數(shù)的prototype屬性所引用的對象原型繼承的原理:一個對象能夠訪問它的proto屬性所指向的對象上的成員和方法(當(dāng)然如果這個對象本身有它要訪問的成員和方法，就不去它的proto屬性所指向的對象上查找，逐級向上查找，直至null,則返回undefined)

var a = {}//繼承關(guān)系:a -> Object.prototype ->null// a.hasOwnProperty 就是訪問的Object.prototype上的hasOwnProperty方法。因?yàn)閍本身并沒有hasOwnProperty方法，而a.__proto__屬性指向 Object.prototype ,且Object.prototype上有hasOwnProperty方法

3、原型鏈

概念：從一個對象到Object.prototype之間存在一條體現(xiàn)繼承層次關(guān)系的鏈?zhǔn)浇Y(jié)構(gòu)。本質(zhì):鏈上的每一個對象都是通過proto屬性連接起來的

...jsvar a = {};//原型鏈：a -> Object.prototype -> nullvar arr=[];//原型鏈:arr -> Array.prototype -> Object.prototype -> nullfunction Person(){}var p1 = new Person()//原型鏈:p1 -> Person.prototype -> Object.prototype -> null...

4、js繼承的實(shí)現(xiàn)方式

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)擴(kuò)充原型式繼承

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)// 相當(dāng)于 Child.prototype 是Person.prototype 它new出來的var c = new Child('lili',12)//繼承的原型鏈://c -> Child.prototype -> Person.prototype -> Object.prototype -> nullc.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

上一篇：JavaScript數(shù)據(jù)類型的一些注意點(diǎn)（3）

下一篇：JavaScript屬性的特性