js的面向對象,js是面向對象語言嗎

面向對象編程.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)

每一個構造函數都有一個原型屬性;
舉個列子: "照貓畫虎”,這里的貓就是原型,而虎就是類型,用JavaScriptprototype來表示就是: “虎.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. 如果第一步沒有獲取到, 就去構造函數的原型中找
  3. 如果1和2都沒獲取到, 去Object構造函數的原型中找
  4. 如果123都沒找到, 就輸出undefined

另外, 畫布canvas的使用經常會用到面向對象, cancas是H5中一個非常神奇的東西, 以后我再介紹吧

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容