面向?qū)ο缶幊?jpg

1. 什么是面向?qū)ο?/h1>

(1) 面向?qū)ο笏枷胫? 有兩個(gè)主要的概念:
類: 有相同的特征和行為的事物的抽象
對(duì)象: 類的一個(gè)實(shí)例
舉個(gè)例子: 你們的媳婦,就是類;我的媳婦,就是對(duì)象......?

(2) js不是一個(gè)嚴(yán)格的面向?qū)ο笳Z(yǔ)言
說(shuō)javascript是一種基于對(duì)象的語(yǔ)言應(yīng)該更正確些,但說(shuō)javascript不面向?qū)ο竽褪恚谖铱磥?lái)則是錯(cuò)誤的認(rèn)知泽本。只是javascript的面向?qū)ο笈c傳統(tǒng)的class-basedOO(基于類的面向?qū)ο?相比, javascript有它與眾不同的地方，其實(shí)主要是因?yàn)樗鼪](méi)有提供象抽象、繼承故响、重載等有關(guān)面向?qū)ο笳Z(yǔ)言的許多功能, 而是把其它語(yǔ)言所創(chuàng)建的復(fù)雜對(duì)象統(tǒng)一起來(lái)，從而形成一個(gè)非常強(qiáng)大的對(duì)象系統(tǒng)虚倒。 這種獨(dú)特性稱它為prototype-basedOO(基于原型的面向?qū)ο?.

2. 在js中判斷一個(gè)變量是否是一個(gè)對(duì)象的方法

(1) typeof

console.log(typeof 12);
console.log(typeof "打發(fā)");
console.log(typeof true);
                
var fn = function () {};
console.log(typeof fn);
                
var Arr = ["1", "2", "是打發(fā)"];
console.log(typeof Arr);// object 對(duì)象 引用類型

打印結(jié)果.png

(2) instanceof(判斷是不是對(duì)象)

var fn = function () {};
var Arr = ["1", "2", "是打發(fā)"];
console.log(Arr instanceof Object);
console.log(fn instanceof Object);
console.log(true instanceof Object);
                
console.log(Arr instanceof Array);
                
注: 'aa' , 123 直接寫是基本類型, 不是引用類型
var str = new String('aa');
console.log(str instanceof String);
console.log('aa' instanceof String);

打印結(jié)果.png

2. 如何自己創(chuàng)建一個(gè)對(duì)象

(1) 直接創(chuàng)建

結(jié)構(gòu): 
var 變量名 = {
     屬性名1 : 值,
     屬性名2 : 值,
     函數(shù)名 : function () {
         函數(shù)內(nèi)容...
     }
}
var stu = {
    name : "笨蛋",
    age : 18,
    sex : "男",
    sayHi : function () {
        console.log(this.name);
    }
}
console.log(stu.name);
stu.sayHi();
對(duì)象調(diào)用自己的函數(shù)
var cf = {
    name : "Barrett-毀滅",
    age : 2,
    money : "$148",
    buibui : function () {
        console.log(this.money);
        }
}
cf.buibui();

打印結(jié)果.png

(2) 對(duì)象的構(gòu)造函數(shù)

如果要批量創(chuàng)建對(duì)象第一種形式會(huì)很繁瑣, 為了解決這個(gè)問(wèn)題,使用構(gòu)造函數(shù)

結(jié)構(gòu)
 function 構(gòu)造函數(shù)名(參數(shù)1, 參數(shù)2){
    this.屬性名1 = 參數(shù)1;
    this.屬性名2 = 參數(shù)2;
    this.函數(shù)名1 = function(){
         函數(shù)內(nèi)容....   
    }
}
        
        
function student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        console.log('我叫' + this.name)
    }
}   
注: 使用構(gòu)造函數(shù)創(chuàng)建對(duì)象
var stu1 = new student('笨蛋', 18);
console.log(stu1.name);
注: 對(duì)象調(diào)用自己的函數(shù)(行為)
stu1.sayHi();

打印結(jié)果.png

(3) 原型(prototype)

每一個(gè)構(gòu)造函數(shù)都有一個(gè)原型屬性;
舉個(gè)列子: "照貓畫虎”烙荷，這里的貓就是原型，而虎就是類型虑稼，用JavaScript的prototype來(lái)表示就是: “虎.prototype = 某個(gè)貓” 或者 “虎.prototype=new 貓()”;
寫個(gè)代碼:

function student(name, age) {
    this.name = name;
    this.age = age;
    this.sayHi = function() {
        alert('我叫' + this.name)
    }
}
var stu1 = new student('笨蛋', 18);
student.prototype.school = '清華';
student.prototype.saySchool = function () {
    console.log('我的母校是' + this.school);
}
console.log(stu1.school);
stu1.saySchool();
        
var stuBeida = new student("傻妞", 19);
stuBeida.school = '北大';
console.log(stuBeida.school);
console.log(stu1.school);

打印結(jié)果.png

既然每一個(gè)構(gòu)造函數(shù)都有一個(gè)原型屬性, 那系統(tǒng)的也就可以有, 比如可以給數(shù)組原型添加一個(gè)函數(shù),如下:

給數(shù)組原型添加sum的一個(gè)函數(shù)
var arr = [1, 3, 5, 8];
Array.prototype.sum = function () {
    var temp = 0;
    for (var i = 0; i < this.length; i++) {
        temp += this[i];
    }
    return temp;
};
console.log(arr.sum());
打印結(jié)果為17

說(shuō)一下原型鏈的問(wèn)題,就是當(dāng)要獲取對(duì)象的某個(gè)屬性的值的時(shí)候:

1. 判斷當(dāng)前這個(gè)對(duì)象是否存在這個(gè)屬性,如果有就輸出
2. 如果第一步?jīng)]有獲取到, 就去構(gòu)造函數(shù)的原型中找
3. 如果1和2都沒(méi)獲取到, 去Object構(gòu)造函數(shù)的原型中找
4. 如果123都沒(méi)找到, 就輸出undefined

另外, 畫布canvas的使用經(jīng)常會(huì)用到面向?qū)ο? cancas是H5中一個(gè)非常神奇的東西, 以后我再介紹吧