對javascript
這門語言來說,相信大家都不會陌生,但最近發現其實好多人對JS對象的概念很模糊,甚至會驚異于JS竟然也有對象
其實JS是完全基于對象的語言,我們所能看到的都是基于對象,包括 js 方法其實也是一個對象
但是js的面向對象與像java的面向對象相比,又是有著極大的不同,java,C#完全面向對象的語言 中有類這個概念,而js對象則是依靠 構造器constructor
利用 原型prototype
構造出來的。
簡單的理解下,類的概念相當于 模板,原型相當于 各個對象組成新的對象
先來總結一下創建對象的3種方式
創建對象的三種方式:
1.通過JSON符號創建
var dog = {
name: 'singledog',
wangwang: function(){
console.log(this.name+"旺旺!");
}
};
dog.wangwang();// singledog旺旺!
2.通過new 關鍵字創建
function Dog(name){
this.name = name;
};
Dog.prototype.wangwang = function() {
console.log(this.name+"wangwang!!");
};
var dog = new Dog("SingleDog:");
dog.wangwang();//SingleDog:wangwang!!
3.通過 ES5新引進的 Object.create() 方法創建
var dog = {
name: 'singledog',
wangwang: function(){
console.log(this.name+"旺旺!");
}
};
var jDog = Object.create(dog);//創建一個新的對象 jDog 并繼承 dog 對象
jDog.wangwang();//singledog旺旺!
原型(prototype)
prototype(原型)是js面向對象中非常重要的一個概念,是深入學習js是必須要理解的一個概念
每個方法 都有一個prototype
屬性,我們可以利用這個屬性來大做文章
之前介紹了,我們生成一個需要用到 new 關鍵字,那么這個new 關鍵字與JAVA中的new一樣嗎?
答案是完全不一樣
可以看一個例子:
function Car(name){
this.name = name
};
Car.prototype = {//指定 Car的原型 對象
driver: function(){
console.log(this.name+" driver!!");
}
};
var obj = new Object();
obj.__proto__ = Car.prototype;
Car.call(obj,"Benz");
obj.driver(); //Benz driver!!
在上面的代碼中,我們發現 var car = new Car();
這句被我們替換成了這三句:
var obj = new Object();
obj.__proto__ = Car.prototype;
Car.call(obj,"Benz");
以上代碼中,我們先新建了一個空的Object
對象 obj,然后將Car的原型賦給了 obj對象的__proto__
,這樣子obj對象就繼承了Car的原型對象,最后一步,在obj對象上執行構造方法Car,這樣子 obj 對象就相當于拿來了 Car方法中 全部this. 屬性或方法
這三步其實等于
new
操作
基于原型,我們可以實現原型鏈的繼承,因為每一個 prototype 都是一個對象,每個對象都隱式的擁用一個 prototype
引用 __proto__
屬性,這樣子當調用一個對象的方法的時候,就會順著__proto__
屬性一層一層往上找,直到找到為止。
說起來似乎很難理解,看個例子幫助大家理解:
function Car(){
};
Car.prototype = {//指定 Car的原型 對象
name : 'car',
driver: function(){
console.log(this.name+" driver!!");
}
};
function QqCar(){
this.name = 'QQ'
};
QqCar.prototype = new Car(); //指定 QqCar的原型為 new Car()
var qqCar = new QqCar();//繼承了driver 方法
qqCar.driver(); // QQ driver!!
function BigQqCar(){
this.name = 'BigQQ'
};
BigQqCar.prototype = qqCar; //指定 BigQQCar的原型為 qqCar
var bigQqCar = new BigQqCar();
bigQqCar.driver = function(){//重寫了driver方法
console.log(this.name+" flying!!");
};
bigQqCar.driver();//BigQQ flying!!
console.log(bigQqCar.__proto__===BigQqCar.prototype); //true
console.log(BigQqCar.prototype === qqCar); //true
console.log(BigQqCar.prototype.__proto__ === QqCar.prototype); //true
// 以上代碼就是一個簡單的原型鏈,每個構造方法生成的對象都有一個 __proto__ 指向 其構造方法的prototype 屬性
以上也只是個人對JS面向對象的理解,歡迎留言補充