對JavaScript中的靜態屬性和原型屬性的理解

首先是在訪問上的區別，當訪問實例對象的某個屬性但它自己沒有時，它就會到原型中去查找，但不會去查找靜態屬性。

// 實例對象不會去查找靜態屬性
function Foo(){}
Foo.a = 1;
var foo = new Foo();
foo.a // undefined

// 當實例對象沒有某個屬性時，會嘗試去原型中查找
function Foo(){}
Foo.prototype.a = 1;
var foo = new Foo();
foo.a // 1

靜態方法中的this指向調用它的對象，好比在下面代碼中指向的就是調用它的Foo，原型方法中的this指向實例對象

function Foo(){}
Foo.fn = function(){
    console.log(this);
};
Foo.prototype.fn = function(){
    console.log(this);
};
var foo = new Foo();
foo.fn(); // Foo {}
Foo.fn(); // function Foo(){}

靜態屬性和原型屬性的區別就在於this的指向以及查找規則上，但this的指向問題並非最重要的，拿實現鏈式調用來講

// 經過原型實現鏈式調用
function Foo(){}
Foo.prototype.a = function(){
    console.log('a');
    return this;
};
Foo.prototype.b = function(){
    console.log('b');
    return this;
};
var foo = new Foo();
foo.a().b(); // a b

// 經過靜態方法實現鏈式調用
function Foo(){}
Foo.a = function(){
    console.log('a');
    return this;
};
Foo.b = function(){
    console.log('b');
    return this;
};
Foo.a().b(); // a b

最大的區別仍是在查找規則上，在原型上添加屬性能夠當作默認屬性來使用

function Foo(){}
Foo.prototype.a = 1;
var foo = new Foo(),
    foo2 = new Foo();
foo2.a = 2;
foo.a // 1
foo2.a // 2

每一個實例對象均可以擁有本身的屬性和方法，在沒有設置的狀況下才會去嘗試使用prototype上的屬性和方法，而靜態方法是沒法實現這種效果的。