OOP-ECMAScript - 深刻理解Javascript

1、面向對象概論

x = {a: 10};
y = {b: 20};
y.Prototype = x 
z = {c: 30};
z.Prototype = y; 
z.a; // 10
x.a = 100;
z.a; //100
/*
    基於原型的基本概念
    1. 基本概念是對象
    2. 對象動態可變，徹底能夠從一個類型轉換成另外一個類型
    3. 對象不須要類
    4. 對象能夠有原型，當對象無法響應對應屬性，則能夠委託給原型
*/
//  1、 多態
//一個函數應用於不一樣對象
function test() {

}
test.call({ a: 10, b: 20 });
test.call({ a: 100, b: 200 });
var a = 1;
var b = 2;
test(); //1,2
//Date.prototype.getTime()例外，必須對應日期對象 new Date()===> Date.prototype.getTime.call(new Date());
//  2、封裝
(function () {
    //初始化上下文
}());
//  3、不支持多重繼承：一個對象能夠用來作直接原型
//  4、AOP特性
//  裝飾者例子:新增一個判斷條件，AOP切入報錯
function Decorator(oldFunction) {
    //匿名封裝原有函數的執行，新增裝飾的過程
    return function () {
        //新增裝飾的業務
        if (fooBar !='test') {
            alert("wrong");
            return false;
        }
        //執行原有函數
        return oldFunction();
    }
}
function test() {
    alert("right");
}
var checkTest = new Decorator(test);
var fooBar = false;
checkTest();

2、ECMAScript中的OOP

/*
    ECMAScript：基於原型的委託式繼承的面嚮對象語言
*/
/*
    1、數據類型
    1. 原始值
    Undefined, Null, Boolean, String, Number, Object
    Reference:  解釋delete、typeof、this
    List：      描述參數列表行爲
    Completion  解釋break、continue、return、throw
*/
var a = undefined;
var b = null;
var c = true;
var d = 'test';
var e = 10;
//  2. Object類型
var x = {
    a: 10,//原始值
    b: { z: 100 },//對象
    c: function () { }//函數
}
//  3. 動態性：程序執行時可隨意增刪改對象屬性
var foo = { x: 20 };
foo.y = 30;//新增
foo.x = function () { }//修改
delete foo.x;
//靜態對象不能修改
Object.freeze(foo);//此時屬性不能進行任何操做
//設置屬性只讀、不可配置
Object.defineProperty(foo, "y", {
    value: 20,
    writable: false, //不可寫
    configurable: false //不可配置
});
//  4. Boolean、String、Number對象：由內置構造函數建立
var c = new Boolean(true);
var d = new String('test');
var e = new Number(10);
// 轉換成原始值
// 使用不帶new關鍵字的函數
c = Boolean(c);
d = String(d);
e = Number(e);
// 從新轉換成對象
c = Object(c);
d = Object(d);
e = Object(e);
//其餘內置構造函數建立：Function、Array、RexExp、Math、Date
/*
    2、構造函數
*/
function A(x) { }//構造函數
var a = new A();
/*
    3、原型
*/
function A() {
    this.x = 10;
}
var a = new A();
A.prototype.y = 20;
a.y;//undefined

var b = new A();
b.y = 20;
/*
    4、讀寫特性
*/
//Get方法
(function () {
    if (O.hasOwnProperty(P)) {
        return O.P;
    }
}());
//Set方法
(function () {
    var foo = {};
    foo.y = 30;//設置
}());
//屬性訪問器，針對對象
var foo = { a: 10 };
foo.a;
foo["a"]
//原始值報錯:對原始值進行屬性取值，先對對象包裝，訪問屬性，而後刪除屬性
var a = 10;
a.toString(); //"10"
a.x = 4;
a.x //undefined

var a = new Number(10);
a.toString();
a.x = 4;
delete a;//因此沒法訪問

3、OOP小測

//一
if (!("a" in window))
{
    var a = 1;
}
alert(a);
//答案：undefined
//由於JavaScript引擎首先會掃描全部的變量聲明，而後將這些變量聲明移動到頂部
var a;
if (!("a" in window)) {
    a = 1;
}
alert(a);

//2
var a = 1,
    b = function a(x) { x && b(--x); };
alert(a);//永遠是1
//填充VO的順序是: 函數的形參 -> 函數申明 -> 變量申明 ->函數表達式
function a(x)
{
    return x * 2;
}
var a;
alert(a); //function

//3
function b(x, y, a) {
    arguments[2] = 10; //活動對象，是當進入上下文時才建立，因此 a爲Undefined
    alert(a);
}
b(1, 2);

//4
function a() {
    alert(this);
}
a.call(null);//[object window]
//若是第一個參數傳入的對象調用者是null或者undefined的話，call方法將把全局對象（也就是window）做爲this的值