JavaScript學習筆記第四天_面向對象編程

weapon 發布于2019-08-21 11:16 / 1380人閱讀

摘要：即另外，注意到構造函數里的屬性，都沒有經過進行初始化，而是直接使用進行綁定。并且在模式下，構造函數沒有使用進行調用，也會導致報錯。調用構造函數千萬不要忘記寫。

1. 基礎

JavaScript不區分類和實例的概念，而是通過原型來實現面向對象編程。
Java是從高級的抽象上設計的類和實例，而JavaScript的設計理念，聽起來就好比Heros里的Peter，可以復制別人的能力。JavaScript就是別人的所有屬性都拷貝過來，成為自己的一部分，并能夠保留自身的能力。

看廖老師的圖片，應該就能感覺出咋回事了，xiaoming這個實例把自己的__proto__指向Student就實現了繼承，這種繼承關系是脆弱的，也是動態可以修改的。

但是JavaScript是不推薦直接使用__proto__進行繼承的。提供了一個Object.creat(原型)來創建對象。這是JavaScript的一種原型繼承的方法，如下實例。

var Student = {
    name : "robot",
    height:180,
    run:function(){
        console.log(this.name + " is running");
    },
    grade:()=>"4"+"grade"
};
function createStudent(name){
    var s = Object.create(Student);
    // init new object
    s.name = name;
    return s;
};
var xiaoming = createStudent("xiaosfsffsfsf");

2. 創建對象

當我們用obj.xxx訪問一個對象的屬性時，JavaScript引擎先在當前對象上查找該屬性，如果沒有找到，就到其原型對象上找，如果還沒有找到，就一直上溯到Object.prototype對象，最后，如果還沒有找到，就只能返回undefined。

以上說明JavaScript引擎有個追朔系統，優先使用當前域的進行查找，不行則向上一個原型內進行查找。

除了使用{...}進行創建對象，還可以使用new 的方法,需要先定義一個構造函數，如下所示。如果使用new那么這個函數就會默認返回this這個對象，如果不是用new，直接調用，那么這個函數就返回undefined，像普通的函數一樣。

function Student(name){
    this.name = name;
    this.hello = function(){
        alert("hello"+name);
    }
}
var stu = new Student("XiaoMing");

新創建的stu的原型鏈是

stu ----> Student.prototype ----> Object.prototype ----> null

用new Student創建的對象stu，還從Student上繼承了constructor屬性，它指向Student本身。

stu.constructor === Student.prototype.constructor; // true
Student.prototype.constructor === Student; // true
Object.getPrototypeOf(stu) === Student.prototype; // true
stu instanceof Student; // true

這個原型鏈還是盜用liaoxuefeng老師的圖

可以看出實際上Student，xiaoming，xiaohong的原型都是指向Student.prototype。當前每個對象的hello方法都是不同的，屬于不同的對象。但根據方法查找規則，如果把hello放在Student.prototype上，就可以實現共用同一個方法，節省內存。即：

function Student(name) {
    this.name = name;
}

Student.prototype.hello = function () {
    alert("Hello, " + this.name + "!");
};

另外，注意到構造函數里的屬性，都沒有經過var進行初始化，而是直接使用this.xxx進行綁定。所以如果沒用new，而是直接調用構造函數，那么將會使this指向window，然后內部的各個屬性都將添加到window上，無意中添加全局變量。并且在strict模式下，構造函數沒有使用new進行調用，也會導致報錯。

***調用構造函數千萬不要忘記寫new。為了區分普通函數和構造函數，按照約定，構造函數首字母應當大寫，而普通函數首字母應當小寫，這樣，一些語法檢查工具如jslint將可以幫你檢測到漏寫的new。***

練習

function Cat(name) {
    this.name = name;
}
Cat.prototype.say = function(){
    return "Hello, "+this.name+"!";
}

在此基礎上，我們還可以創建一個createCat()函數，在內部封裝所有的new 操作。

function Cat(props) {
    this.name = props.name || "波斯貓";
    this.color = props.name || "黑白";
}
Cat.prototype.say = function(){
    return "Hello, I am " + this.color + this.name+"!";
}

function createCat(props){
    return new Cat(props || {});
}

這樣就不需要new 操作了，參數也很靈活，可以不傳入，也可以傳少量的，其他的屬性將會由默認的值替代。而且參數不需要考慮順序，可對收到的JSON直接生成對象。

3. 原型繼承

JavaScript的原型繼承實現方式就是：
定義新的構造函數，并在內部用call()調用希望“繼承”的構造函數，并綁定this；
借助中間函數F實現原型鏈繼承，最好通過封裝的inherits函數完成；
繼續在新的構造函數的原型上定義新方法。

廖老師的一張圖簡單扼要說明這個繼承模型。

4. class繼承

其實3是不太重要的，因為ES6已經推出了class這個關鍵字來解決繁瑣的原型鏈繼承的復雜性，就像java一樣好，但底層其實還是原型鏈繼承實現，這一點并沒有變化。

class Cat extends Animal{

constructor(name){
    super(name);
}

say(){
    return "Hello, "+this.name+"!";
}

}

say()方法，實例依然是共享的。but，這個需要較新的瀏覽器支持，一般還用不了，但是可以使用Babel這個庫去兼容這個玩意，其實我不了解這是個啥庫。

GPU云服務器云服務器 javascript面向對象編程 javascript面向對象編程指南面向對象編程 javascript 面向對象

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86496.html

26天學通前端開發（配資料）

摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。前言好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。網上有很多前端的學習路徑文章，大多是知...

blair 2019-08-21 16:59 評論0 收藏0
JavaScript學習第四天筆記（數組）

摘要：示例代碼如下索引數組輸出結果為索引數組關聯數組注意關聯數組的數組的長度與元素的個數不一致，原因是的官方不支持關聯數組。定義一個空數組訪問二維數組中的元素循環遍歷二維數組數組概述數組是什么數組是值的有序集合。數組中的每個值叫做一個元素，而每個元素在數組中都右一個唯一的位置。這個位置用數字表示，叫做索引數組；用字符串表示，叫做關聯數組。JavaScript數組是無類型的；數組的元素...

lncwwn 2019-08-23 10:53 評論0 收藏0
JS函數式編程讀書筆記 - 1

摘要：在近期看到了函數式編程這本書預售的時候就定了下來。主要目的是個人目前還是不理解什么是函數式編程。且和現在在學習函數式編程有莫大的關系。加速大概了解了函數式編程之后。總結看完了第一章也是可以小結一下的函數式編程。本文章記錄本人在學習函數式中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在近期看到了《JavaScript函數式編程》這本書預售的時候就定了下...

G9YH 2019-08-21 10:37 評論0 收藏0
JavaScript面向對象的編程指南（第2版）學習筆記（一）

摘要：我們一般不判斷是，判斷不是在判斷元素是否存在時候，最好使用如果沒有定義會有警告第三章，函數返回值一個函數只能有一個返回值，如果有多個返回值，使用數組的形式返回。子句，返回值，就是函數的返回值。示例將一個函數的返回值傳遞給另一個函數。第一章 1，用自己的語言描述出，什么是對象、類、封裝、聚合、繼承、多態？對象，擁有屬性和方法的任何抽象概念。類，可以實例化，有共同屬性或方法（行為）的...

fancyLuo 2019-08-22 17:20 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創建了一個具體的對象。對象就是數據，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0