正所謂萬(wàn)物皆對(duì)象双炕,面向?qū)ο笠彩呛芏嗑幊陶Z(yǔ)言里常談的問(wèn)題,接下來(lái)我們來(lái)了解一下js的面向?qū)ο蟆?/p>
一障本、定義對(duì)象的三種方式
// 第一種:
var obj1 = {
name:"李四",
age:19,
};
// 第二種弛槐;
var obj2 = new Object();
obj2.name = "張三";
obj2.age = "20";
// 第三種;
var obj3 = Object.create({name:"張三",age:20});
二依啰、對(duì)象的傳址
- 對(duì)象的傳址:對(duì)象賦值相同的內(nèi)存地址乎串;
舉個(gè)例子:改變arr2[1]的值,arr[1]也會(huì)隨之改變速警,這樣就得不到我們預(yù)期的效果了叹誉。
var arr = [1,2,3,4,5];
var arr2 = arr;
arr2[1] = 6;
console.log(arr);
- 深拷貝:解決傳址問(wèn)題
把對(duì)象使用JSON.stringify方法轉(zhuǎn)變成json格式數(shù)據(jù) ,然后在使用JSON.parse解析json字符串闷旧,這個(gè)看起來(lái)在做一些浪費(fèi)時(shí)間的事情长豁,但數(shù)據(jù)經(jīng)過(guò)這樣轉(zhuǎn)變后,改變arr2的值忙灼,不會(huì)影響到arr的值匠襟。
var arr2 = JSON.parse(JSON.stringify(arr));
三钝侠、工廠模式
工廠模式:使用函數(shù)封裝一個(gè)創(chuàng)建對(duì)象的接口,實(shí)例化對(duì)象酸舍。用于解決變量的污染帅韧。下面例子是工廠模式的一般寫(xiě)法;
function Factory(height){
// obj人類(lèi)啃勉;
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();
四忽舟、構(gòu)造函數(shù)
- 構(gòu)造函數(shù)類(lèi)似于類(lèi)的概念,在es6還沒(méi)之前淮阐,都是使用構(gòu)造函數(shù)叮阅,它與類(lèi)相似,首字母大寫(xiě)(約定俗成的).
構(gòu)造函數(shù)的原型:
對(duì)象是由自身和原型共同構(gòu)成的泣特;對(duì)象的原型是proto
構(gòu)造函數(shù)是由自身和原型共同構(gòu)成的浩姥;構(gòu)造函數(shù)的原型prototype
屬性寫(xiě)在構(gòu)造函數(shù)里;方法寫(xiě)在原型上群扶;
// 定義構(gòu)造函數(shù) (this)
function Car(style1,color){
// obj.type = type;
this.type = style1;
this.color = color;
this.action = function(){
console.log("跑");
}
}
- 調(diào)用構(gòu)造函數(shù)
// 實(shí)例化 關(guān)鍵字:new(把抽象類(lèi)具體化及刻,把類(lèi)變成對(duì)象);
var car1 = new Car("寶馬","紅色");
console.log(car1.type);
car1.action();
- new 關(guān)鍵字 的作用
- 創(chuàng)建了空的對(duì)象;
var obj = {};
- 改變this指向竞阐;
Car.call(obj,"寶馬","白色");
console.log(obj.type);
- 賦值原型缴饭;
若使用(obj._proto_ = Car.prototype;)肯定是不合理的,會(huì)存在上面所說(shuō)的傳址問(wèn)題骆莹,這時(shí)候我們需要引入一個(gè)中間構(gòu)造函數(shù)颗搂。
// 解決傳址問(wèn)題 借助中間構(gòu)造函數(shù)
function Link(){}
Link.prototype = Person.prototype;
// 子級(jí)原型賦值一個(gè)空的(只有原型的)實(shí)例化對(duì)象,子級(jí)改變不影響父級(jí)
Car.prototype = new Link();
4.構(gòu)造函數(shù)的公有和私有以及繼承
- 公有屬性和私有屬性
在js中沒(méi)有public,private,protent三個(gè)關(guān)鍵字來(lái)定義成員的訪問(wèn)權(quán)限幕垦,只能模擬公有屬性和私有屬性丢氢。使用 var\let定義的是私有屬性;使用this關(guān)鍵字的是公有屬性
function Person(name){
// 私有屬性先改;
var name = name;
// 公有屬性疚察;
this.height = "178cm";
// get方法:通過(guò)公有方法訪問(wèn)私有屬性
this.get = function(){
return name;
}
// set方法:設(shè)置私有屬性的
this.set = function(newName){
name = newName;
console.log(name);
}
}
- 繼承
由于沒(méi)有extends,使用call、apply仇奶、bind函數(shù)改變this指向從而達(dá)到想要的繼承效果貌嫡。
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("玩");
}
}