正所謂萬物皆對象,面向對象也是很多編程語言里常談的問題,接下來我們來了解一下js的面向對象。
一、定義對象的三種方式
// 第一種:
var obj1 = {
name:"李四",
age:19,
};
// 第二種;
var obj2 = new Object();
obj2.name = "張三";
obj2.age = "20";
// 第三種;
var obj3 = Object.create({name:"張三",age:20});
二、對象的傳址
- 對象的傳址:對象賦值相同的內存地址;
舉個例子:改變arr2[1]的值,arr[1]也會隨之改變,這樣就得不到我們預期的效果了。
var arr = [1,2,3,4,5];
var arr2 = arr;
arr2[1] = 6;
console.log(arr);
- 深拷貝:解決傳址問題
把對象使用JSON.stringify方法轉變成json格式數據 ,然后在使用JSON.parse解析json字符串,這個看起來在做一些浪費時間的事情,但數據經過這樣轉變后,改變arr2的值,不會影響到arr的值。
var arr2 = JSON.parse(JSON.stringify(arr));
三、工廠模式
工廠模式:使用函數封裝一個創建對象的接口,實例化對象。用于解決變量的污染。下面例子是工廠模式的一般寫法;
function Factory(height){
// obj人類;
var obj = {};
obj.name = "小明";
obj.height = height;
obj.age = 20;
obj.hobby = function(){
console.log("我喜歡籃球");
}
return obj;
}
var newFactory = Factory("180cm");
console.log(newFactory.height);
newFactory.hobby();
四、構造函數
- 構造函數類似于類的概念,在es6還沒之前,都是使用構造函數,它與類相似,首字母大寫(約定俗成的).
構造函數的原型:
對象是由自身和原型共同構成的;對象的原型是proto
構造函數是由自身和原型共同構成的;構造函數的原型prototype
屬性寫在構造函數里;方法寫在原型上;
// 定義構造函數 (this)
function Car(style1,color){
// obj.type = type;
this.type = style1;
this.color = color;
this.action = function(){
console.log("跑");
}
}
- 調用構造函數
// 實例化 關鍵字:new(把抽象類具體化,把類變成對象);
var car1 = new Car("寶馬","紅色");
console.log(car1.type);
car1.action();
- new 關鍵字 的作用
- 創建了空的對象;
var obj = {};
- 改變this指向;
Car.call(obj,"寶馬","白色");
console.log(obj.type);
- 賦值原型;
若使用(obj._proto_ = Car.prototype;)肯定是不合理的,會存在上面所說的傳址問題,這時候我們需要引入一個中間構造函數。
// 解決傳址問題 借助中間構造函數
function Link(){}
Link.prototype = Person.prototype;
// 子級原型賦值一個空的(只有原型的)實例化對象,子級改變不影響父級
Car.prototype = new Link();
4.構造函數的公有和私有以及繼承
- 公有屬性和私有屬性
在js中沒有public,private,protent三個關鍵字來定義成員的訪問權限,只能模擬公有屬性和私有屬性。使用 var\let定義的是私有屬性;使用this關鍵字的是公有屬性
function Person(name){
// 私有屬性;
var name = name;
// 公有屬性;
this.height = "178cm";
// get方法:通過公有方法訪問私有屬性
this.get = function(){
return name;
}
// set方法:設置私有屬性的
this.set = function(newName){
name = newName;
console.log(name);
}
}
- 繼承
由于沒有extends,使用call、apply、bind函數改變this指向從而達到想要的繼承效果。
function Dad(height){
this.name = "張三";
this.age = 50;
this.height = height;
this.money = "$1000000000";
this.hobby = function(){
console.log("喜歡太極");
}
}
function Son(height){
Dad.call(this,height);
this.action = function(){
console.log("玩");
}
}