JS 物件封裝的常用方式

js是一門物件導向語言,其物件是用prototype屬性來模擬的,下面,來看看如何封裝js物件.

function person (name,age,***)
pserson.prototype = 
}

這種方式是比較常見的方式,比較直觀,但是person() 的職責是構造物件,如果把初始化的事情也放在裡面完成,**就會顯得繁瑣,如果放在乙個方法裡初始化會不會好點呢?

function person (info)
pserson.prototype = 
sayhello:function()
}

可是,說到這裡就發現,name,age,*** 並沒有在person裡面申明,哪來的呢???

new 的執行過程可以用下面乙個函式來代替

var mynew = function(constructor, args) ;
o.__proto__ = constructor.prototype;
var type = typeof res;
if (['string', 'number', 'boolean', 'null', 'undefined'].indexof(type) !== -1) 
return res;
}

解釋:

首先通過 var o = {} 構造乙個空物件.

然後將建構函式的原型屬性prototype賦值給o 的原型物件__proto__ 。這樣，在執行 this.init(info); 這句話的時候，物件 o 就可以在其原型物件中查詢_init_ 方法。（原型鏈）。

之後這句話就是精髓了。

以o為上下文呼叫函式，同時將引數作為陣列傳遞。那麼，

this._init_(info);

這句話就會被 o 執行，

函式

_init_ : function(info)

以 o 為上下文呼叫，o也將擁有自己的 name,age,*** 屬性。

如果在建構函式中，return 復合型別，包括物件，函式，和正規表示式，那麼就會直接返回這個物件，否則，返回 o 。

var type = typeof res;
if(['string','number','boolean','null','undefined'].indexof(type) !== -1)
return res;

測試一下

function person(name) 
person.prototype.sayhello = function() 
var o1 = mynew(person, ['pawn']);
console.log(o1);
o1.sayhello();

ok 吧

這種方式是我從 jquery 那裡學來的。

jquery 物件具有很強的整合性，可以作為函式呼叫，也可以做為物件呼叫，當作為函式呼叫的時候，她可以無需 new 而返回它的乙個例項，很方便。

先看**

var person = function(info)
person.prototype = 
}person.prototype.init.prototype = person.prototype;

這種封裝方式非常巧妙。

將物件的構造操作放在函式的裡面，而自己充當乙個工廠。

不斷呼叫 prototype 並不是乙個直觀的做法，於是

var person = function(info)
person.fn = person.prototype = 
}makearray:function()
}// 這句話的作用 
// 雖然把makearray 等常用方法掛載到 person.prorotype 下面,但還是會被 init 這個例項使用.
person.fn.init.prototype = person.fn;

最後用閉包封裝起來

var person = (function(window) 
person.fn = person.prototype = 
},makearray: function() 
}person.fn.init.prototype = person.fn;
return person;
})();

測試一下

var p = person('pawn');
console.log(p);
p.sayhello();

最後js也提供了一種構造物件的方式,object.create(); 可以傳遞乙個物件person,構造乙個p,並且使p 繼承person.

var person = 
}var p = object.create(person);
console.log(p);
p.sayhello();

結果

可以看到,物件person的屬性成為了p的原型屬性,也就是說 p 原型繼承自 person !

我們可以實現乙個 object.create()

object.create = function(prototype);
func.prototype = prototype;
var o = new func();
return o;
}

在這裡,我們將 person 作為建構函式的原型屬性,就可以構造出以person 為原型物件的物件.

測試一下

JS 物件封裝的常用方式

js是一門物件導向語言,其物件是用prototype屬性來模擬的,下面,來看看如何封裝js物件.function person name,age,pserson.prototype 這種方式是比較常見的方式,比較直觀,但是person 的職責是構造物件,如果把初始化的事情也放在裡面完成,就會顯得繁瑣...

js封裝物件

封裝物件是js原生提供的功能跟jquery無關 var car new object car.color red car.run function 以上是基本封裝方式還有一種簡便方式 var car 這樣合基本方法一回事以下介紹用jquery擴充套件物件 function teop.public...

js建立物件的幾種常用方式

js varlev function functionparent varx parent alert x.name alert x.lev 說明 1.在函式中定義物件,並定義物件的各種屬性，雖然屬性可以為方法，但是建議將屬性為方法的屬性定義到函式之外，這樣可以避免重複建立該方法 2.引用該物件的時...

JS 物件封裝的常用方式

JS 物件封裝的常用方式

js封裝物件

js建立物件的幾種常用方式

相關推薦