js 中繼承經常使用的幾種方法

繼承

1. 繼承： 就是指 一個對象 有權 去訪問 另外一個對象的成員屬性

做用是實現代碼的複用

2. 繼承的方式：只要能實現一個對象 有權訪問另外一個對象成員 的 方式 均可以成爲是 實現繼承的方式

 

3 .繼承是對象與對象之間的關係

 

4.原型的方法就是給繼承使用的

#### 繼承的實現方式 4種方法

 

① 擴展原有的原型

 

function Parent(name,age){

this.name=name;

this.age=age;

}

 

function Child(){

 

}

 

var p=new Parent('小紅',19);

Child.prototype.name=p.name; （p.name==p.__proto__.name）

Child.prototype.age=p.age;

var c=new Child();

console.log(c.name);

console.log(c.age);

 

c能夠訪問p的成員屬性

 

   ② 替換原型 （也叫組合繼承經常使用方法）

 

 

function Parent(name, age) {

this.name = name;

this.age = age;

}

 

function Child() {

 

}

 

var p = new Parent('小紅', 19);

Child.prototype = p;

 

var c = new Child();

 

console.log(c.name);

console.log(c.age);

 

 

 

 

 ③混入式（最經常使用唉）：將要被繼承 的對象成員 拷貝一份，添加到 繼承對象

var grandpa = {

color: '#fff

'};

 

var parent = {

name: '小綠', age: 20

};

 

var child = {

gender: '女'

};

 

混入式：

for(var i in parent){

child[i] = parent[i];

}

 

for(var i in grandpa){

child[i] = grandpa[i];

}

console.log(child.grand);

 

child繼承了 grandpa parent 這兩個對象的成員屬性

 

下邊不會封裝要知道上邊的！！

上邊代碼有點冗餘，能夠封裝：

 

var grandpa = {color: '#fff'};

var parent = {name: '小綠', age: 20};

var child = {gender: '女'};

 

child.extend = function() {

var k, // 枚舉對象屬性

i = 0,

obj; // 緩存當前arguments的實參對象

// 遍歷arguments中的全部實參

for(; i < arguments.length; i++){

obj = arguments[i];

// 枚舉當前遍歷到的實參對象屬性

for(k in obj){

// 將屬性添加到this上

this[k] = obj[k];

}

}

};

child.extend(grandpa, paredt);

 

④ 對象冒充的方法：

 

function parent(name, age, sex) {

this.name = name;

this.age = age;

this.sex = sex;

}

 

function Child(name, age, sex, phone, address) {

this.add = parent;

this.add(name, age, sex); //調用

delete this.add; //清除內存

 

this.phone = phone;

this.address = address;

}

 

var c = new Child('小白', 18, '男', '1381235221', '北京')

console.log(c);

 

 

 

 

瞭解就行

es5 新增的方法 object.creat('繼承的父級元素' , '給child新添加的屬性')：實現原型鏈的繼承；

 

var parent = {name: 'tom'};

var child = Object.create(parent, {age :{

value: 18,

writable: false,

configurable: true

}});