對象的遍歷 | 混合對象"類"

該筆記參考自：《你不知道的JavaScript上卷》

一.對象的遍歷

1.for...in循環可以用來遍歷對象的可枚舉屬性名列表（包括[[Prototype]]鏈）。
var arr = [1,2,3,4,5];
for(var i in arr){
    console.log(i);
}
>>>
0
1
2
3
4
2.但是如何遍歷屬性的值？
var arr = [1,2,3,4,5];
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}
>>>
1
2
3
4
5
  • 這實際上只是通過遍歷下標來指向值。
3.ES5中增加了一些數組的輔助迭代器，包括了forEach()、every()和some()。
//forEach()
var arr = [1,2,3,4,5];
arr.forEach(function(element,index,arr){
    console.log(element);
});
>>>
1
2
3
4
5

//every()
var arr = [1,2,3,4,5];
var everyResult = arr.every(function(element,index,arr){
    return element > 3;
});
everyResult;
>>>false

//some()
var arr = [1,2,3,4,5];
var someResult = arr.some(function(element,index,arr){
    return element > 3;
});
someResult;
>>>true

①every()和some()的區別？

  • every()會對數組中的每個元素執行回調函數，如果全部通過(true)，則返回true。
  • some()也會對數組中的每個元素執行回調函數，如果有任意一個通過(true)，則返回true。
4.那么如何直接遍歷值而不是數組下標呢？
  • 用for...of循環唄（ES6）
var arr = [1,2,3,4,5];
for(var v of arr){
    console.log(v);
}
>>>
1
2
3
4
5

①for...of循環的機制？

  • for...of循環首先會被訪問對象請求一個迭代器對象，然后通過調用迭代器對象的next()方法來遍歷所有返回值。
var arr = [1,2,3,4,5];
var element = arr[Symbol.iterator]();
element.next();
>>>{value: 1, done: false}

element.next();
>>>{value: 2, done: false}

element.next();
>>>{value: 3, done: false}

element.next();
>>>{value: 4, done: false}

element.next();
>>>{value: 5, done: false}

element.next();
>>>{value: undefined, done: true}

  • 細節1：使用ES6的符號Symbol.iterator來獲取對象的@@iterator內部屬性。

  • 細節2：@@iterator本身并不是一個迭代器對象，而是一個返回迭代器對象的函數。

5.遍歷普通的對象

①既然for...of循環那么強大，那么適用于普通的對象嗎？

  • NO！

②為啥？

  • 普通的對象沒有內置的@@iterator。

③喔，那照這么說，我手動加一個行不行呢？

  • No problem.
var person = {
    name: 'Gerg',
    age: 21,
    [Symbol.iterator]: function(){
        var o = this;
        var index = 0;
        var ok = Object.keys(o);
        return {
            next: function(){
                return{
                    value: o[ok[index++]],
                    done: (index > ok.length)
                };
            }
        };
    }
};
var element = person[Symbol.iterator]();
element.next();
>>>{value: "Gerg", done: false}

element.next();
>>>{value: 21, done: false}

element.next();
>>>{value: undefined, done: true}
Object.keys.png

④當普通對象設置了@@iterator后，就可以放心使用for...of循環了。

var person = {
    name: 'Gerg',
    age: 21,
    [Symbol.iterator]: function(){
        var o = this;
        var index = 0;
        var ok = Object.keys(o);
        return {
            next: function(){
                return{
                    value: o[ok[index++]],
                    done: (index > ok.length)
                };
            }
        };
    }
};
for(var v of person){
    console.log(v);
}
>>>
Gerg
21

⑤還可以使用Object.defineProperty()定義@@iterator喔

var person = {
    name: 'Gerg',
    age: 21
};
Object.defineProperty(person,Symbol.iterator,{
    enumerable: false,
    writable: false,
    configurable: true,
    value: function(){
        var o = this,
            index = 0,
            ok = Object.keys(o);
        return{
            next: function(){
                return{
                    value: o[ok[index++]],
                    done: (index > ok.length)
                };
            }
        };
    }
});
var element = person[Symbol.iterator]();
element.next();
>>>{value: "Gerg", done: false}

element.next();
>>>{value: 21, done: false}

element.next();
>>>{value: undefined, done: true}

for(var v of person){
    console.log(v);
}
>>>
Gerg
21

二.混合對象"類"

1.類理論

①什么是類？String對象就是一個類。

②什么是實例？'Gerg'字符串就是String類的一個實例。

③什么是繼承？實例或類可以使用另一個類中的方法。

'Gerg'.length;
>>>4

'Gerg'.indexOf('e');
>>>1

④什么是多態？父類的通用行為可以被子類更為特殊的行為重寫。

2.在軟件設計中類是一種可選的模式，是否在JavaScript使用決定權在你。
3.類的繼承

①定義好一個子類后，相對于父類來說它就是一個獨立并且完全不同的類。

②子類會包含父類行為的原始副本，但是也可以重寫所有繼承的行為甚至定義新的行為。

③父類和子類并非實例。

④JavaScript中父類與子類的關系只存在于兩者構造函數對應的.prototype對象中，因此它們的構造函數之間并不存在直接聯系。

⑤多態并不表示子類與父類有關聯，子類得到的僅僅是父類的一份副本。類的繼承實際上就是復制。

⑥聲明是super？

子類相對引用父類中的行為，子類得到的僅僅是繼承自父類行為的一份副本。子類對繼承到的一個方法進行"重寫"，并不會影響父類中的方法，這兩個方法分別作為獨立的存在。正是因為這樣才能使用相對多態引用訪問父類中的方法。

4.多重繼承

①多重繼承意味著所有父類的定義都會被復制到子類中。

②鉆石問題？

鉆石問題.png

  • 子類D繼承自兩個父類（B和C），這兩個父類都繼承自A。如果A中有drive()方法并且B和C都重寫了這個方法（多態），那么D引用drive()時到底應該選擇哪個版本呢（B:drive()還是C:drive()）?

  • 目前的JavaScript：它本身并不提供"多重繼承"功能。但這無法阻止開發者們的熱情。

5.混入

①JavaScript中的函數無法真正地復制，所以只能復制對共享函數對象的引用。

②寄生繼承

function Vehicle(){
    this.engines = 1;
}
Vehicle.prototype.ignition = function(){
    console.log('Turing on my engine.');
};
Vehicle.prototype.drive = function(){
    this.ignition();
    console.log('Steering and moving forward!');
};
function Car(){
    var car = new Vehicle();
    car.wheels = 4;
    var vehDrive = car.drive;
    //重寫Vehicle中的drive()函數
    car.drive = function(){
        vehDrive.call(this);
        console.log('Rolling on all ' + this.wheels + ' wheels!');
    };
    return car;
}
var myCar = new Car();
myCar.drive();
>>>
Turing on my engine.
Steering and moving forward!
Rolling on all 4 wheels!
  • 細節：

調用new Car()時會創建一個新對象并綁定到Car的this上。但是這里我們并沒有使用這個對象而是返回了我們自己的car對象，所以最初被創建的這個對象會被丟棄。

③顯式混入

function mixin(sourceObj,targetObj){
    for(var key in sourceObj){
        //只賦值sourceObj中有，而targetObj中無的屬性
        if(!(key in targetObj)){
            targetObj[key] = sourceObj[key];
        }
    }
    return targetObj;
}
var Vehicle = {
    engines: 1,
    iginition: function(){
        console.log('Turing on my engine.');
    },
    drive: function(){
        this.iginition();
        console.log('Steering and moving forward!');
    }
};
var Car = mixin(Vehicle,{
    wheels: 4,
    carDrive: function(){
        Vehicle.drive.call(this);
        console.log('Rolling on all ' + this.wheels + ' wheels!');
    }
});
Car.carDrive();
>>>
Turing on my engine.
Steering and moving forward!
Rolling on all 4 wheels!

④隱式混入

var Something = {
    cool: function(){
        this.greeting = 'Hello World';
        this.count = this.count ? this.count + 1 : 1;
    }
};
Something.cool();
Something.greeting;
>>>"Hello World"

Something.count;
>>>1

var Another = {
    anotherCool: function(){
        Something.cool.call(this);
    }
};
Another.anotherCool();
Another.greeting;
>>>"Hello World"

Another.count;
>>>1
  • "借用"了函數Something.cool()并在Another的上下文中調用了它。
6.小結

①類意味著復制。

②多態（在繼承鏈的不同層次上，同名卻功能不同的函數）看上去像是從子類引用父類，但是本質上引用的其實是復制的結果。

③對象和函數只能復制引用，無法復制被引用的對象或函數本身。

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

推薦閱讀更多精彩內容