面向對象編程.jpg
1. 什么是面向對象
(1) 面向對象思想中, 有兩個主要的概念:
類: 有相同的特征和行為的事物的抽象
對象: 類的一個實例
舉個例子: 你們的媳婦,就是類;我的媳婦,就是對象......?
(2) js不是一個嚴格的面向對象語言
說javascript是一種基于對象的語言應該更正確些,但說javascript不面向對象，在我看來則是錯誤的認知。只是javascript的面向對象與傳統的class-basedOO(基于類的面向對象)相比,javascript有它與眾不同的地方，其實主要是因為它沒有提供象抽象、繼承、重載等有關面向對象語言的許多功能, 而是把其它語言所創建的復雜對象統一起來，從而形成一個非常強大的對象系統。 這種獨特性稱它為prototype-basedOO(基于原型的面向對象).
2. 在js中判斷一個變量是否是一個對象的方法
(1) typeof
console.log(typeof 12);
console.log(typeof "打發");
console.log(typeof true);
var fn = function () {};
console.log(typeof fn);
var Arr = ["1", "2", "是打發"];
console.log(typeof Arr);// object 對象 引用類型
打印結果.png
(2) instanceof(判斷是不是對象)
var fn = function () {};
var Arr = ["1", "2", "是打發"];
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);
打印結果.png
2. 如何自己創建一個對象
(1) 直接創建
結構:
var 變量名 = {
屬性名1 : 值,
屬性名2 : 值,
函數名 : function () {
函數內容...
}
}
var stu = {
name : "笨蛋",
age : 18,
sex : "男",
sayHi : function () {
console.log(this.name);
}
}
console.log(stu.name);
stu.sayHi();
對象調用自己的函數
var cf = {
name : "Barrett-毀滅",
age : 2,
money : "$148",
buibui : function () {
console.log(this.money);
}
}
cf.buibui();
打印結果.png
(2) 對象的構造函數
如果要批量創建對象第一種形式會很繁瑣, 為了解決這個問題,使用構造函數
結構
function 構造函數名(參數1, 參數2){
this.屬性名1 = 參數1;
this.屬性名2 = 參數2;
this.函數名1 = function(){
函數內容....
}
}
function student(name, age) {
this.name = name;
this.age = age;
this.sayHi = function() {
console.log('我叫' + this.name)
}
}
注: 使用構造函數創建對象
var stu1 = new student('笨蛋', 18);
console.log(stu1.name);
注: 對象調用自己的函數(行為)
stu1.sayHi();
打印結果.png
(3) 原型(prototype)
每一個構造函數都有一個原型屬性;
舉個列子: "照貓畫虎”，這里的貓就是原型，而虎就是類型，用JavaScript的prototype來表示就是: “虎.prototype= 某個貓” 或者 “虎.prototype=new貓()”;
寫個代碼:
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);
打印結果.png
既然每一個構造函數都有一個原型屬性, 那系統的也就可以有, 比如可以給數組原型添加一個函數,如下:
給數組原型添加sum的一個函數
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());
打印結果為17
說一下原型鏈的問題,就是當要獲取對象的某個屬性的值的時候:
- 判斷當前這個對象是否存在這個屬性,如果有就輸出
- 如果第一步沒有獲取到, 就去構造函數的原型中找
- 如果1和2都沒獲取到, 去
Object構造函數的原型中找 - 如果123都沒找到, 就輸出
undefined
另外, 畫布canvas的使用經常會用到面向對象, cancas是H5中一個非常神奇的東西, 以后我再介紹吧
