什么是繼承
- js中的繼承就是獲取存在對(duì)象已有屬性和方法的一種方式.
繼承一 屬性拷貝
就是將對(duì)象的成員復(fù)制一份給需要繼承的對(duì)象.
// 創(chuàng)建父對(duì)象
var superObj = {
name:'liyajie',
age:25,
friends:['小名','小麗','二蛋'],
showName:function(){
console.log(this.name);
}
}
// 創(chuàng)建需要繼承的子對(duì)象
var subObj = {};
// 開始拷貝屬性(使用for...in...循環(huán))
for(var i in superObj){
subObj[i] = superObj[i];
}
// 這里我們打印下subObj看下
console.log(subObj);
// 打印superObj(父對(duì)象)
console.log(superObj);
上述代碼打印結(jié)果是一樣的, 但是存在幾點(diǎn)問題
屬性拷貝繼承的問題
如果繼承過來的成員是引用類型的話,
那么這個(gè)引用類型的成員在父對(duì)象和子對(duì)象之間是共享的,
也就是說修改了之后, 父子對(duì)象都會(huì)受到影響.
繼承二 原型式繼承
原型式繼承就是借用構(gòu)造函數(shù)的原型對(duì)象實(shí)現(xiàn)繼承. 即 子構(gòu)造函數(shù).prototype = 父構(gòu)造函數(shù).prototype
// 創(chuàng)建父構(gòu)造函數(shù)
function SuperClass(name){
this.name = name;
this.showName = function(){
console.log(this.name);
}
}
// 設(shè)置父構(gòu)造器的原型對(duì)象
SuperClass.prototype.age = 25;
SuperClass.prototype.friends = ['小名','小麗'];
SuperClass.prototype.showAge = function(){
console.log(this.age);
}
// 創(chuàng)建子構(gòu)造函數(shù), 剛開始沒有任何成員
function SubClass(){
}
// 設(shè)置子構(gòu)造器的原型對(duì)象實(shí)現(xiàn)繼承
SubClass.prototype = SuperClass.prototype;
// 因?yàn)樽訕?gòu)造函數(shù)的原型被覆蓋了, 所以現(xiàn)在子構(gòu)造函數(shù)的原型的構(gòu)造器屬性已經(jīng)不在指向SubClass,
// 而是SuperClass,我們需要修正
console.log(SubClass.prototype.constructor == SuperClass);// true
console.log(SuperClass.prototype.constructor == SuperClass);// true
SuperClass.prototype.constructor = SubClass;
// 上面這行代碼之后, 就實(shí)現(xiàn)了繼承
var child = new SubClass();
console.log(child.age);// 25
console.log(child.friends);// ['小名','小麗']
child.showAge();// 25
!> 只能繼承父構(gòu)造函數(shù)的原型對(duì)象上的成員, 不能繼承父構(gòu)造函數(shù)的實(shí)例對(duì)象的成員, 同時(shí)父構(gòu)造函數(shù)的原型對(duì)象和子構(gòu)造函數(shù)的原型對(duì)象上的成員有共享問題
繼承三 原型鏈繼承
原型鏈繼承 即 子構(gòu)造函數(shù).prototype = new 父構(gòu)造函數(shù)();
// 創(chuàng)建父構(gòu)造函數(shù)
function SuperClass(){
this.name = 'liyajie';
this.age = 25;
this.showName = function(){
console.log(this.name);
}
}
// 設(shè)置父構(gòu)造函數(shù)的原型
SuperClass.prototype.friends = ['小名', '小強(qiáng)'];
SuperClass.prototype.showAge = function(){
console.log(this.age);
}
// 創(chuàng)建子構(gòu)造函數(shù)
function SubClass(){
}
// 實(shí)現(xiàn)繼承
SubClass.prototype = new SuperClass();
// 修改子構(gòu)造函數(shù)的原型的構(gòu)造器屬性
SubClass.prototype.constructor = SubClass;
var child = new SubClass();
console.log(child.name); // liyajie
console.log(child.age);// 25
child.showName();// liyajie
child.showAge();// 25
console.log(child.friends); // ['小名','小強(qiáng)']
// 當(dāng)我們改變friends的時(shí)候, 父構(gòu)造函數(shù)的原型對(duì)象的也會(huì)變化
child.friends.push('小王八');
console.log(child.friends);["小名", "小強(qiáng)", "小王八"]
var father = new SuperClass();
console.log(father.friends);["小名", "小強(qiáng)", "小王八"]
問題是不能給父構(gòu)造函數(shù)傳遞參數(shù), 父子構(gòu)造函數(shù)的原型對(duì)象之間有共享問題.
繼承四 借用構(gòu)造函數(shù)
使用
call和apply借用其他構(gòu)造函數(shù)的成員, 可以解決給父構(gòu)造函數(shù)傳遞參數(shù)的問題, 但是獲取不到父構(gòu)造函數(shù)原型上的成員.也不存在共享問題.
// 創(chuàng)建父構(gòu)造函數(shù)
function Person(name){
this.name = name;
this.friends = ['小王','小強(qiáng)'];
this.showName = function(){
console.log(this.name);
}
}
// 創(chuàng)建子構(gòu)造函數(shù)
function Student(name){
// 使用call借用Person的構(gòu)造函數(shù)
Person.call(this,name);
}
// 測(cè)試是否有了Person的成員
var stu = new Student('liyajie');
stu.showName(); // liyajie
console.log(stu.friends); // ['小王','小強(qiáng)']
繼承五 組合繼承
借用構(gòu)造函數(shù) + 原型式繼承
// 創(chuàng)建父構(gòu)造函數(shù)
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
}
}
// 設(shè)置父構(gòu)造函數(shù)的原型對(duì)象
Person.prototype.showAge = function(){
console.log(this.age);
}
// 創(chuàng)建子構(gòu)造函數(shù)
function Student(name){
Person.call(this,name);
}
// 設(shè)置繼承
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
// 上面代碼解決了 父構(gòu)造函數(shù)的屬性繼承到了子構(gòu)造函數(shù)的實(shí)例對(duì)象上了,
// 并且繼承了父構(gòu)造函數(shù)原型對(duì)象上的成員,
// 解決了給父構(gòu)造函數(shù)傳遞參數(shù)問題
// 但是還有共享的問題
問題: 還有共享的問題
繼承六 借用構(gòu)造函數(shù) + 深拷貝
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
}
}
Person.prototype.friends = ['小王','小強(qiáng)','小王八'];
function Student(name,25){
// 借用構(gòu)造函數(shù)(Person)
Person.call(this,name,25);
}
// 使用深拷貝實(shí)現(xiàn)繼承
deepCopy(Student.prototype,Person.prototype);
Student.prototype.constructor = Student;
// 這樣就將Person的原型對(duì)象上的成員拷貝到了Student的原型上了, 這種方式?jīng)]有屬性共享的問題.
推薦使用這種方式.
深拷貝(遞歸)
使用遞歸實(shí)現(xiàn), 主要是為了解決對(duì)象中引用類型的成員的共享問題.
好處是不管是值類型的屬性還是引用類型的成員都不會(huì)有共享問題.
// 將obj2的成員拷貝到obj1中, 只拷貝實(shí)例成員
function deepCopy(obj1, obj2) {
for (var key in obj2) {
// 判斷是否是obj2上的實(shí)例成員
if (obj2.hasOwnProperty(key)) {
// 判斷是否是引用類型的成員變量
if (typeof obj2[key] == 'object') {
obj1[key] = Array.isArray(obj2[key]) ? [] : {};
deepCopy(obj1[key], obj2[key]);
} else {
obj1[key] = obj2[key];
}
}
}
}
var person = {
name: 'liyajie',
age: 25,
showName: function() {
console.log(this.name);
},
friends: [1, 2, 3, 4],
family: {
father: 'ligang',
mather: 'sizhongzhen',
wife: 'dan',
baby: 'weijun'
}
}
var student = {};
// 將person的成員拷貝到student對(duì)象上.
deepCopy(student, person);
Array.isArray()
此方法主要是來判斷某個(gè)對(duì)象是否是數(shù)組, 因?yàn)槭荅S5的新特性, 所有有兼容性問題.
// 檢查是否是數(shù)組對(duì)象
function checkIsArray(obj){
if(Array.isArray){// 如果有這個(gè)屬性
return Array.isArray(obj);
} else {
return Object.prototype.toString.call(obj) == '[object Array]';
}
}
instanceof
簡(jiǎn)單來說用來判斷某個(gè)對(duì)象是否是由某個(gè)構(gòu)造函數(shù)創(chuàng)建的.
嚴(yán)謹(jǐn)一點(diǎn): 用來檢查某個(gè)對(duì)象的構(gòu)造函數(shù)的原型對(duì)象是否在當(dāng)前對(duì)象的原型鏈上, 因?yàn)樵玩溈梢匀我庥晌覀冃薷?/p>
示例代碼如下:
function Person(){}
var person = new Person();
console.log(person instanceof Person); // true
Person.prototype = {};
console.log(person instanceof Person); // false
