JavaScript 對象及初始面向對象

JavaScript 對象

JavaScript 對象是擁有屬性和方法的數據
在這裏插入圖片描述
面向對象

  • 面向對象僅僅是一個概念或者編程思想。
  • 通過一種叫做原型的方式來實現面向對象編程。

創建對象

創建對象的方式(在這列舉兩種,其它在這不做過多解釋)

  • 使用內置對象
  • 自定義對象構造

內置對象

常見的內置對象

  • String(字符串)對象
  • Date(日期)對象
  • Array(數組)對象
  • Boolean(邏輯)對象
  • Math(算數)對象
  • RegExp(正則表達式)對象

不做太多詳細的解釋。。。

自定義對象
基於 Object 對象的方式創建對象


語法
	var 對象名稱=new Object();//通過 .添加屬性和方法
eg:
	var flower=new Object();
	flower.name="牡丹";
	flower.showName=function(){
		alert(this.name);
	}
	

使用字面量賦值方式創建對象


語法
	var 對象名稱={
		//寫屬性和方法
	}
eg:
	var flower={
		name:"牡丹",
		showName:function(){
			alert(this.name);
		}
	}
	

構造函數

在 JavaScript中,任何合法的函數都可以作爲對象的構造函數,這既包括系統內置函數,也包括用戶自己定義的函數。一旦函數被作爲構造函數執行,它內部的 this 屬性將引用函數本身。

構造函數特點

  • 構造函數始終都應該以一個大寫字母開頭
  • 構造函數本身也是函數,只不過可以用來創建對象
  • 創建構造函數的新實例,必須使用 new 操作符

示例


	//創建構造函數
	function Flower(name,area){
		this.name=name;
		this.area=area;
		this.show=function(){
			alert(this.name+"	"+this.area);
		}
	}
	//使用構造函數創建對象
	var flower=new Flower("長春花","非洲、亞洲等");
	flower.show();
	

調用構造函數的步驟

  • 創建一個新對象
  • 將構造函數的作用域賦給新對象(this 就指向了這個新對象)
  • 執行構造函數中的代碼
  • 返回新對象

constructor 屬性

constructor 屬性指向構造函數

使用 instanceof 操作符檢測對象類型

JavaScript 的原型和原型鏈

構造函數創建對象:

function Person(){
	
}
var person=new Person();
person.name="Kevin";
Console.log(person.name);//Kevin

Person 就是一個構造函數,我們使用 new 創建了一個實例對象 person

prototype

每個函數都有一個 prototype 屬性
每一個 JavaScript 對象(null 除外),在創建的時候就會產生與之相關聯的另一個對象,這個對象就是我們所說的原型,每一個對象都會從原型 “繼承” 屬性。

function Person(){

}
//雖然寫在註釋裏,但是要注意
//prototype 是函數纔會有的屬性
Person.prototype.name="Kevin";
var person1=new Person();
var person2=new Person();
Console.log(person1.name);//Kevin
Console.log(person2.name);//Kevin

在這裏插入圖片描述
proto

每一個 JavaScript 對象(除了 null)都具有的一個屬性,叫 proto,這個屬性會指向該對象的原型。


function Person(){

}
var person=new Person();
Console.log(person._proro_ ==== Person.prototype);//true

在這裏插入圖片描述
constructor

每個原型都有一個 constructor 屬性指向關聯的構造函數


function Person(){

}
Console.log(Person === Person.prototype.constructor);//true

在這裏插入圖片描述

實例與原型


function Person(){

}
Person.prototype.name="Kevin";
var person=new Person();
person.name="Daisy";
Console.log(person.name);//Daisy

delete person.name;
Console.log(person.name);//Kevin

在這個例子中,我們給實例對象 person 添加了 name 屬性,當我們打印 person.name 的時候,結果自然爲 Daisy。

但是當我們刪除了 person 的 name 屬性時,讀取person.name,從 person 對象中找不到 name 屬性,就會從 person 的原型 person.proto,也就是Person.prototype 中查找,幸運的是我們找到了 name 屬性,name值爲Kevin。

原型與原型


var obj=new Object();
obj.name="Kevin";
Console.log(obj.name);//Kevin

在這裏插入圖片描述
原型鏈接


Console.log(Object.prototyoe._proto_ ===  null);//true

在這裏插入圖片描述

借用構造函數

apply


語法
	apply([thisObj[,argArray]])
	

應用某一對象的一個方法,用另一個對象替換當前對象。

thisObj 被用作當前對象的對象。

第二個參數是一個數組,也就是將多個參數組合成爲一個數組傳入

call


語法
	call([thisObj[,arg1[,arg2[,[,argN]]]]])
	

調用一個對象的一個方法,以另一個對象替換當前對象。

thisObj 被當作當前對象的對象。
arg1,arg2,…argN 爲被傳遞方法參數序列。

優勢

可以在子類型構造函數中向父類型構造函數傳遞函數。

組合繼承

組合繼承:有時也叫做僞經典繼承

  • 將原型鏈和借用構造函數的技術組合到一起,發揮兩者之長的一種繼承模式
  • 使用原型鏈實現對原型屬性和方法的繼承,而通過借用構造函數來實現對實例屬性的繼承

歸納

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章