面向?qū)ο蟮娜筇匦?/h2>
- 封裝、繼承家淤、多態(tài)
- 封裝
- 作用：方便代碼的維護(hù)异剥，提高代碼的復(fù)用性，更虐泉的訪問數(shù)據(jù)的方式
-
注意：js 的封裝多了一層意思絮重，就是使用對象來封裝變量和函數(shù)
var type = '喜劇';
var actors = ['趙麗穎','彭于晏','李榮浩','鄧超'];
var showTime = '2017-2-17 2017-3-17';
var director = '韓寒';
var play = function(){
console.log('播放冤寿。。青伤。督怜。');
}
var film = {
type = "喜劇"；
actors:['趙麗穎','彭于晏','李榮浩','鄧超'];
showTime:'2017-2-17 2017-3-17';
director:'韓寒';
play:function(){
console.log('播放....');
}
};
console.log(film);
type = '動作片';
- 繼承
- 現(xiàn)實(shí)生活中的繼承：繼承遺產(chǎn)狠角，一個(gè)人獲得另一個(gè)人所擁有的財(cái)富或者是資源的方式
- 編程語言中的繼承：一個(gè)類（對象）獲得另外一個(gè)類（對象）的屬性和方法的一種方式号杠。
- 面向?qū)ο蟮恼Z言特征：類（C++）C（沒有類），js 中沒有類（class）丰歌，支持面向?qū)ο蟮恼Z言
- 多態(tài)
多種形態(tài)
- 表現(xiàn)：
對于相同的操作姨蟋，不同的對象表現(xiàn)出不同的行為
隱藏不同
- 實(shí)現(xiàn)：
js 天生具備多態(tài)的特性（弱類型的語言）
var obj1 = {name:'zhangsan',age:20};
var obj2 = {};
for(var k in obj1){
//點(diǎn)語法在這里獲取不到obj2.k = obj1.k;
obj2[k] = obj1[k];
}
console.log(obj2);
內(nèi)置構(gòu)造函數(shù)的方式創(chuàng)建對象
- 內(nèi)置構(gòu)造函數(shù)
Object Function(String Number Boolean) Array Date...
var type = '喜劇';
var actors = ['趙麗穎','彭于晏','李榮浩','鄧超'];
var showTime = '2017-2-17 2017-3-17';
var director = '韓寒';
var play = function(){
console.log('播放冤寿。。青伤。督怜。');
}
var film = {
type = "喜劇"；
actors:['趙麗穎','彭于晏','李榮浩','鄧超'];
showTime:'2017-2-17 2017-3-17';
director:'韓寒';
play:function(){
console.log('播放....');
}
};
console.log(film);
type = '動作片';
多種形態(tài)
對于相同的操作姨蟋，不同的對象表現(xiàn)出不同的行為
隱藏不同
js 天生具備多態(tài)的特性（弱類型的語言）
var obj1 = {name:'zhangsan',age:20};
var obj2 = {};
for(var k in obj1){
//點(diǎn)語法在這里獲取不到obj2.k = obj1.k;
obj2[k] = obj1[k];
}
console.log(obj2);
Object Function(String Number Boolean) Array Date...
創(chuàng)建對象
//創(chuàng)建不同類型的對象
var obj = new Object();
var date = new Date();
var str = 'demo'; //string
var strObj = new String('demo'); //object
var strObj2 = String('demo'); //string
var strObj3 = new Object('demo'); //object
console.log(str == strObj);
console.log(str == strObj2);
console.log(str === strObj);
console.log(str.length);
- 如果需要?jiǎng)?chuàng)建多個(gè)相似的對象，那么代碼中冗余度太高（重復(fù)的代碼太多）
//創(chuàng)建對象
var book1 = new Object();
//設(shè)置屬性
book1.name = "花田半畝";
book1.author = "田維";
book1.price = "40.01";
//設(shè)置方法
book1.logDes = function(){
console.log('書名：' + this.name);
}
book1.logDes();
//創(chuàng)建多個(gè)對象
var book2 = new Object();
book2.name = "三國演義";
book2.author = "羅貫中";
book2.price = "34.01";
book2.logDes = function (){
console.log("書名：" + this.name);
}
console.log(book1);
console.log(book2);
簡單工廠函數(shù)創(chuàng)建對象
//提供函數(shù)（工廠函數(shù)）
function createBook(){
//創(chuàng)建空對象
var o = new Object();
//設(shè)置屬性和方法
o.name = '默認(rèn)的名稱';
o.author = '默認(rèn)的作者';
o.logDes = function(){
console.log('作者是：' + this.author);
};
//返回新創(chuàng)建的對象
return o;
}
//創(chuàng)建對象
var book1 = createBook();
var book2 = createBook();
cosnole.log(book1);
console.log(book2);
- 封裝
把固定的部分提取寫成函數(shù)的函數(shù)體立帖，把變化的部分提取出來眼溶，作為函數(shù)傳遞
function createBook(name,author){
var o = new Object();
o.name = name;
o.author = author;
o.logDes = function(){
console.log('作者是：' + this.author);
};
return o;
}
var book1 = createBook("小學(xué)數(shù)學(xué)","教育部");
var book2 = createBook("高等數(shù)學(xué)","燕子");
console.log(book1);
console.log(book2);
- 如果創(chuàng)建多個(gè)不同類型的對象，那么我們無法分辨
function createPerson(name,age){
var o = new Object();
o.name = name;
o.age = age;
return o;
}
function createDog(name,age)
{
var o = new Object();
o.name = name;
o.age = age;
return o;
}
//創(chuàng)建具體的對象
var obj1 = createPerson("張三",88);
var obj2 = createDog("物理韜韜",13);
console.log(obj1);
console.log(obj2);
//typeof 判斷類型
console.log(typeof obj1);
console.log(typeof obj2);
console.log(obj1.constructor); //Object
console.log(obj2.constructor); //Object
自定義構(gòu)造函數(shù)方式創(chuàng)建對象
function createPerson(name,age){
//原料：name + age + 空對象
var o = new Object();
//對原料進(jìn)行加工
o.name = name;
o.age = age;
//產(chǎn)品出廠
return o;
}
var p1 = createPerson("張三",20);
var p2 = createPerson("張三",20);
var p3 = createPerson("張三",20);
- 自定義構(gòu)造函數(shù)創(chuàng)建對象
- 提供一個(gè)構(gòu)造函數(shù)
- 通過 this 指針來設(shè)置屬性和方法
- 通過 new 操作符創(chuàng)建對象
//提供一個(gè)構(gòu)造函數(shù)
//構(gòu)造函數(shù)簡單介紹
//作用：對對象進(jìn)行一些初始化的設(shè)置
//和普通函數(shù)的區(qū)別
//首字母大寫
//調(diào)用方式不一樣晓勇，配合 new 使用
function Person(name,age){
//默認(rèn) 創(chuàng)建對象
// var o = new Object();
//默認(rèn)會賦值給 this
//this = o;
//通過 this 指針來設(shè)置屬性和方法
this.name = name;
this.age = age;
this.showName = function(){
console.log(this.name);
};
this.showAge = function(){
console.log(this.age);
};
//默認(rèn)返回
//return this;
}
//使用 new 操作符來創(chuàng)建對象
var p1 = new Person('張三'堂飞，20);
var p2 = new Person('張老漢'，200);
console.log(p1);
console.log(p2);
- 自定義構(gòu)造函數(shù)方式創(chuàng)建對象內(nèi)部的實(shí)現(xiàn)細(xì)節(jié)
- 我們在使用 new 關(guān)鍵字調(diào)用構(gòu)造函數(shù)的時(shí)候宵蕉，內(nèi)部默認(rèn)會創(chuàng)建一個(gè)空的對象
- 默認(rèn)會把這個(gè)空的對象賦值給 this
- 通過 this 來設(shè)置新對象的屬性和方法
- 在構(gòu)造函數(shù)的最后酝静，默認(rèn)會把新創(chuàng)建的對象返回
- 自定義構(gòu)造函數(shù)和工廠函數(shù)對比
- 函數(shù)的名稱不一樣，構(gòu)造函數(shù)首字母大寫
- 自定義構(gòu)造函數(shù)創(chuàng)建方式內(nèi)部會自動的創(chuàng)建空對象并賦值給 this
- 默認(rèn)會自動返回新創(chuàng)建的對象
- 返回值
- 沒有顯示的 return , 默認(rèn)會把新創(chuàng)建的對象返回
- 先的執(zhí)行了 return 語句羡玛，就得看具體的情況
返回的是值類型别智，那么直接忽略該返回，把新創(chuàng)建的對象返回稼稿；
返回的是引用類型的數(shù)據(jù)薄榛，會覆蓋調(diào)新創(chuàng)建的對象讳窟，直接返回引用數(shù)據(jù)類型的值。
function Dog(name){
this.name = name;
//return 'demo'; 忽略
//return function(){} 覆蓋
}
var dog = new Dog('阿黃');
console.log(dog);
構(gòu)造函數(shù)注意事項(xiàng)1
- 函數(shù)傳值&對象類型&構(gòu)造器屬性
function Student(number,className,log){
this.number = number;
this.className = className;
this.log = log;
}
var stu1 = new Student("201701","九陰真經(jīng)修煉1班"敞恋，function(){
console.log('學(xué)號：' + this.number);
})
var stu2 = new Student("201702","九陰真經(jīng)修煉2班",function(){
console.log("班級名稱：" + this.className);
})
stu1.log();
stu2.log();
- 對象的類型（判斷）
- 關(guān)鍵字 instanceOf 用來判斷當(dāng)前對象是否是某個(gè)類型的實(shí)例（檢查某個(gè)對象是否是使用指定構(gòu)造函數(shù)創(chuàng)建的）
- 語法：對象 instanceOf 構(gòu)造函數(shù)（類型）
function Person(){};
function Dog(){};
var p1 =new Person();
var dog1 = new Dog();
console.log(p1 instanceof Person);
console.log(p1 instanceof Dog);
console.log(dog1 instanceof Person);
console.log(dog1 instanceof Dog);
- 構(gòu)造器屬性（獲壤龇取）
- 在所有的對象中，都擁有一個(gè)構(gòu)造器屬性：constructor
function Person(){};
function Dog(){};
var p1 = new Person();
var dog1 = new Dog();
console.log(p1.constructor);
console.log(dog1.constructor);
構(gòu)造函數(shù)注意事項(xiàng)2
- 函數(shù)調(diào)用& this
- 函數(shù)調(diào)用
new:創(chuàng)建對象硬猫，并在最后返回該對象
構(gòu)造函數(shù)：用于初始化對象
以普通函數(shù)的方式來調(diào)用構(gòu)造函數(shù)补箍，那么內(nèi)部的 this 指向的是 window
function Person(name){
if(this instanceof Person){
this.name = name;
}else{
return new Person(name);
}
}
var p1 = new Person('嗶哩嗶哩');
//構(gòu)造函數(shù)本身是一個(gè)函數(shù)，在調(diào)用時(shí)可以直接調(diào)用
<del>var p2 = Person('嘩啦嘩啦');</del>//不要這么寫
console.log(p2); //undefined
構(gòu)造函數(shù)方式創(chuàng)建對象存在的問題
var showName = function(){
console.log("姓名：");
}
function Person(name,age){
this.name = name;
this.age = age;
this.showName = showName;
}
//創(chuàng)建對象
var p1 = new Person("張小花",18);
var p2 = new Person("張全蛋",99);
p1.showName();
p2.showName();
//每創(chuàng)建一個(gè)對象啸蜜，內(nèi)部都會聲明一個(gè)showName函數(shù)
console.log(p1.showName == p2.showName); //false
缺點(diǎn)
- 把函數(shù)寫在了外部坑雅，破壞封裝性
- 增加了一個(gè)全局變量
