前端面試題總結二(js原型繼承)

今天這篇文章整理了JS原型和繼承的一些知識點，面試的時候  基！本！都！會！問！還不快認真閱讀下文，看看你還有哪些知識點需要掌握吧~

 

1.原型鏈

基本思想：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。

構造函數，原型，實例之間的關系：每個構造函數都有一個原型對象，原型對象包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。

原型鏈實現繼承例子：

function a() {

this .name = '張三' ;

}

a.prototype.getName = function () {

return this .name;

}

function b() {

this .name = '李四' ;

}

//繼承了a

b.prototype = new a();

b.prototype.getName = function (){

return this .name;

}

var instance = new b ();

console.log(instance.getName()); //'李四'

改簡單點

function a() {
this.name = '張三';
}
a.prototype.getName = function() {
return this.name;
}

var instance = new a();
console.log(instance.getName());//'張三'

 

2.借用構造函數

基本思想：在子類型構造函數的內部調用超類構造函數，通過使用call()和apply()方法可以在新創建的對象上執行構造函數。

例子：

function  a() {

this .colors = [ "red" , "blue" , "green" ];

}

function  b() {

a.call( this ); //繼承了a

}

var  instance1 =  new  b();

instance1.colors.push( "black" );

console.log(instance1.colors); //"red","blue","green","black"

var  instance2 =  new  b();

console.log(instance2.colors); //"red","blue","green"

 

3.組合繼承

 

基本思想：將原型鏈和借用構造函數的技術組合在一塊，從而發揮兩者之長的一種繼承模式。

function a(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
a.prototype.sayName = function() {
console.log(this.name);
}
function b(name, age) {
a.call(this,name);//繼承屬性
this.age = age;
}
//繼承方法
b.prototype = new a();
b.prototype.constructor = b;//這個是為了讓b的構造函數重新指回這個類本身，否則的話它會變成之前繼承的那個類的構造函數,在后面再調用的時候可能會出現意想不到的情況

b.prototype.sayAge = function() {
console.log(this.age);
}
var instance1 = new b("Hong",18);
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"Hong"
instance1.sayAge();//18
var instance2 = new b("su",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"su"
instance2.sayAge();//20

 

3.寄生組合繼承

function beget(obj){   // 生孩子函數 beget：龍beget龍，鳳beget鳳。

    var F = function(){};

    F.prototype = obj;

    return new F();

}

function Super(){

    // 只在此處聲明基本屬性和引用屬性

    this.val = 1;

    this.arr = [1];

}

//  在此處聲明函數

Super.prototype.fun1 = function(){};

Super.prototype.fun2 = function(){};

//Super.prototype.fun3...

function Sub(){

    Super.call(this);   // 核心

    // ...

}

var proto = beget(Super.prototype); // 核心

proto.constructor = Sub;            // 核心

Sub.prototype = proto;              // 核心

 

var sub = new Sub();

alert(sub.val);

alert(sub.arr);

這個方式是最佳方式，但是太麻煩，一般只是課本上用，不多解釋

 

4寄生式繼承

function beget(obj){   // 生孩子函數 beget：龍beget龍，鳳beget鳳。

     var  F =  function (){};

     F.prototype = obj;

     return  new  F();

}

function  Super(){

     this .val = 1;

     this .arr = [1];

}

function  getSubObject(obj){

     // 創建新對象

     var  clone = beget(obj);  // 核心

     // 增強

     clone.attr1 = 1;

     clone.attr2 = 2;

     //clone.attr3...

 

     return  clone;

}

 

var  sub = getSubObject( new  Super());

alert(sub.val);      // 1

alert(sub.arr);      // 1

alert(sub.attr1);    // 1

 

想了解ES6中的繼承請關注下一篇文章