用方法封裝javascript的new操作符(一)
更新時(shí)間:2010年12月25日 23:01:33 作者:
雖然js是基于對(duì)象的,但在很多時(shí)候會(huì)使用到new這個(gè)操作符。
先看個(gè)例子:
var Class = {
create : function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
var A = Class.create();
A.prototype = {
initialize:function(){
//todo
}
test:"abc"
}
var a = new A();
這是很多jser構(gòu)建類和實(shí)例化對(duì)象的過程, 細(xì)心的人會(huì)發(fā)現(xiàn): 實(shí)例化的a會(huì)多一個(gè)initialize方法。initialize在實(shí)例化時(shí)做為代理在實(shí)例化后就沒有存在的意義了,而且有時(shí)候會(huì)引起不必要的麻煩,比如 for…in 語句遍歷a時(shí),會(huì)把initialize這個(gè)方法遍歷出來。
我首先想到的是用前面博文中寫的Class.js來做,這樣就非常干凈。但是在Class.js中的繼承機(jī)制有一些bug的,在不入侵(即:不修改原型、不生成額外屬性)的條件下,要實(shí)現(xiàn)接口更是難上加難了。于是我就想到封裝new操作符,這樣做的好處就是 可先修改原型,在封裝new的方法中,實(shí)現(xiàn)繼承、接口,并去除額外屬性。
我們首先給new操作符的簡(jiǎn)單的實(shí)現(xiàn)一下:
function New(){//new是關(guān)鍵字,所以要區(qū)別一下
var as = [],args = arguments;
for(var i=1;i<args.length;i++){
as.push('args['+i+']');
}
nobj = eval("new args[0]("+as.join(",")+");");
return nobj;
}
接下來測(cè)試一下:
function A(n){ this.name = n;}
var a1 = new A('ts');
alert(a1.name);//ts
var a2 = New(A,'tangoboy');
alert(a2.name);//tangoboy
測(cè)試成功,現(xiàn)在New方法基本可以代替new操作符實(shí)例化對(duì)象了。
然后 解決文章開始的initialize問題就非常簡(jiǎn)單了:
function New(){
var as = [],args = arguments;
for(var i=1;i<args.length;i++){
as.push('args['+i+']');
}
nobj = eval("new args[0]("+as.join(",")+");");
delete nobj.initialize;//刪除實(shí)例化對(duì)象的方法
return nobj;
}
下一節(jié)開始豐富New方法。
復(fù)制代碼 代碼如下:
var Class = {
create : function () {
return function () {
this.initialize.apply(this, arguments);
}
}
}
var A = Class.create();
A.prototype = {
initialize:function(){
//todo
}
test:"abc"
}
var a = new A();
這是很多jser構(gòu)建類和實(shí)例化對(duì)象的過程, 細(xì)心的人會(huì)發(fā)現(xiàn): 實(shí)例化的a會(huì)多一個(gè)initialize方法。initialize在實(shí)例化時(shí)做為代理在實(shí)例化后就沒有存在的意義了,而且有時(shí)候會(huì)引起不必要的麻煩,比如 for…in 語句遍歷a時(shí),會(huì)把initialize這個(gè)方法遍歷出來。
我首先想到的是用前面博文中寫的Class.js來做,這樣就非常干凈。但是在Class.js中的繼承機(jī)制有一些bug的,在不入侵(即:不修改原型、不生成額外屬性)的條件下,要實(shí)現(xiàn)接口更是難上加難了。于是我就想到封裝new操作符,這樣做的好處就是 可先修改原型,在封裝new的方法中,實(shí)現(xiàn)繼承、接口,并去除額外屬性。
我們首先給new操作符的簡(jiǎn)單的實(shí)現(xiàn)一下:
復(fù)制代碼 代碼如下:
function New(){//new是關(guān)鍵字,所以要區(qū)別一下
var as = [],args = arguments;
for(var i=1;i<args.length;i++){
as.push('args['+i+']');
}
nobj = eval("new args[0]("+as.join(",")+");");
return nobj;
}
接下來測(cè)試一下:
function A(n){ this.name = n;}
var a1 = new A('ts');
alert(a1.name);//ts
var a2 = New(A,'tangoboy');
alert(a2.name);//tangoboy
測(cè)試成功,現(xiàn)在New方法基本可以代替new操作符實(shí)例化對(duì)象了。
然后 解決文章開始的initialize問題就非常簡(jiǎn)單了:
function New(){
var as = [],args = arguments;
for(var i=1;i<args.length;i++){
as.push('args['+i+']');
}
nobj = eval("new args[0]("+as.join(",")+");");
delete nobj.initialize;//刪除實(shí)例化對(duì)象的方法
return nobj;
}
下一節(jié)開始豐富New方法。
相關(guān)文章
JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)
這篇文章主要介紹了JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12JavaScript實(shí)現(xiàn)圖片本地預(yù)覽功能【不用上傳至服務(wù)器】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片本地預(yù)覽功能,針對(duì)非IE瀏覽器的HTML5濾鏡功能及IE瀏覽器的相關(guān)組件功能實(shí)現(xiàn)不上傳至服務(wù)器預(yù)覽本地圖片的效果,需要的朋友可以參考下2017-09-09基于Bootstrap實(shí)現(xiàn)的下拉菜單手機(jī)端不能選擇菜單項(xiàng)的原因附解決辦法
小編使用bootstrap做的下拉菜單在電腦瀏覽器中可以正常使用,在手機(jī)瀏覽器中能彈出下拉列表卻不能選擇列表中的菜單項(xiàng),怎么回事,如何解決呢?下面小編給大家分享下具體原因及解決辦法,一起看下吧2016-07-07jquery操作下拉列表、文本框、復(fù)選框、單選框集合(收藏)
jquery操作拉列表、文本框、復(fù)選框、單選框集合。各種對(duì)下拉列表、文本框、復(fù)選框、單選框的jquery的相關(guān)操作。做為記錄和收藏的最好方法2014-01-01JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果
這篇文章主要介紹了JS實(shí)現(xiàn)仿微博可關(guān)閉彈出層效果,涉及JavaScript彈出窗口的設(shè)置及頁面元素動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09javascript中$(function() {});寫與不寫有哪些區(qū)別
javascript中$(function() {....}) 是jQuery中的經(jīng)典用法,等同于 $(document).ready(function() {....}) javascript中$(function() {});寫與不寫有哪些區(qū)別,需要的朋友可以參考下2015-08-08