javascript繼承

javascript的繼承

 

在js設計之初，做者就沒有想到這門語言會這門普遍的應用，但當此時已經普遍應用以後，發現js存在不少不足，它沒有類的概念，不能像其餘OO語言同樣，實現繼承， 只能經過原型鏈，去克隆另一個類的屬性， 僞裝在繼承。具體是用來幹嗎呢？

答案是：要是用來複用咱們以前寫過的方法功能等等。好比我想要一個以前寫過的方法，若是去copy，就會以爲很麻煩，若是能夠直接繼承過來，不就省事不少了嗎？

 

好！接下來，來講說js繼承是怎麼實現的？

答案是：想辦法把某個對象的屬性複製到本身要用的對象中，從而讓本身的對象能夠複用那個對象的屬性，這就是繼承。

 

如今來講說繼承的方法(瞭解繼承以前，要先了解一下 js的原型鏈，以及 call和apply這個回調函數的做用)。

js的繼承有兩種方式：一、call、apply實現繼承；二、原型鏈實現繼承。

 

一、call、apply實現繼承，這一種方法也是最爲簡單，講父對象的構造函數綁定在子對象上。

	var A=function(){  
		this.name="meili";  
		this.show=function(){  
	    	alert(this.color);  
	}  
	}  
	var B=function(){
		this.color="red" ; 
	        A.call(this)//a在 b中執行，實現了B繼承A得功能  
	}  
	   
	   
	 var C = new B();  //建立了對象A，而且克隆了函數B的全部屬性，然而B已經繼承了A，從而C也擁有了A的屬性。
	 C.show();  //red

　　補充：還有一個apply函數的繼承，原理和call函數同樣，具體請看.call（）和.apply（）的相同點和不一樣點。

 

二、原型鏈實現繼承

1)基本模式：

function Person(name,age){
    this.name=name;
    this.age=age;
}
    Person.prototype.sayHello=function(){
    alert("使用原型獲得Name："+this.name);
}
var per = new Person("alin",21);
per.sayHello(); //輸出：使用原型獲得Name:alin

解析：前4行定義了一個Person()，第5行往Person的原型鏈表上添加了sayHello的屬性函數，第8行，建立新對象per，而且該對象克隆了Person的全部屬性（sayHello是Person中的屬性了），因此，第9行就能夠直接調用了。

 

2）prototype原型模式：

普通版：

	function Person(name){
	    this.name = name;
	}

	function Student(species,age){
		this.species = species;
		this.age = age;
	}

	Student.prototype = new Person();
	Student.prototype.constructor = Student;
	var studentalin = new Student("大學生",21);
	console.log(studentalin.species);//大學生

封裝版：

	function Person(name){
	    this.name = name;
	}

	function Student(species,age){
		this.species = species;
		this.age = age;
	}



	function extend(Child,Parent){
		var F = function(){};
		F.prototype = Parent.prototype;
		Child.prototype = new F();
		Child.prototype.constructor = Child;
		Child.uber = Parent.prototype;
	}

	extend(Student,Person);
	var studentalin = new Student("大學生",21);
	console.log(studentalin.species);//大學生

　說明：這個封裝版，是YUI庫實現繼承的方法。

 拷貝版：

	function Person(name){
	    this.name = name;
	}

	function Student(species,age){
		this.species = species;
		this.age = age;
	}



	function extend(Child,Parent){
		var p = Parent.prototype;
		var c = Child.prototype;
		for(var i in p){
			c[i] = p[i];
		}
		c.uber = p ;
	}

	extend(Student,Person);
	var studentalin = new Student("大學生",21);
	console.log(studentalin.species);//大學生

　　說明：把子對象的全部屬性都拷貝到父對象中。

 

 

最後題外瞭解一下function建立的原理：

 

var A = function(){};

 

分解一下，上面建立 A() 的原理：

一、x = new Object();//開闢一塊內存，而後創造一個對象

二、x.constructor = A;//將x的構造函數指向A的函數實體

三、A.prototype = x;//A的原型指向新開闢的對象