用方法封装javascript的new操作符(一)

先看个例子：


代码如下:

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构建类和实例化对象的过程， 细心的人会发现： 实例化的a会多一个initialize方法。initialize在实例化时做为代理在实例化后就没有存在的意义了，而且有时候会引起不必要的麻烦，比如 for…in 语句遍历a时，会把initialize这个方法遍历出来。
我首先想到的是用前面博文中写的Class.js来做,这样就非常干净。但是在Class.js中的继承机制有一些bug的，在不入侵(即:不修改原型、不生成额外属性)的条件下，要实现接口更是难上加难了。于是我就想到封装new操作符，这样做的好处就是 可先修改原型，在封装new的方法中，实现继承、接口，并去除额外属性。
我们首先给new操作符的简单的实现一下：


代码如下:

function New(){//new是关键字，所以要区别一下
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;
}
接下来测试一下：
function A(n){ this.name = n;}
var a1 = new A('ts');
alert(a1.name);//ts
var a2 = New(A,'tangoboy');
alert(a2.name);//tangoboy
测试成功，现在New方法基本可以代替new操作符实例化对象了。
然后 解决文章开始的initialize问题就非常简单了：
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;//删除实例化对象的方法
return nobj;
}

下一节开始丰富New方法。

赞 (0)

相关推荐

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 用方法封装javascript的new操作符(一)

    先看个例子: 复制代码 代码如下: 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构建类和实例化对象的过程,

  • JavaScript使用链式方法封装jQuery中CSS()方法示例

    本文实例讲述了JavaScript使用链式方法封装jQuery中CSS()方法.分享给大家供大家参考,具体如下: 主要思路就是:返回this对象,将所获取的操作元素放入一个数组中.在原型中添加拓展方法 <html> <head> <title></title> </head> <body> <div id="one">aa</div> </body> <script typ

  • 常用的前端JavaScript方法封装

    目录 1.输入一个值,返回其数据类型** 2.数组去重 3.字符串去重 4.深拷贝 浅拷贝 5.reverse底层原理和扩展 6.圣杯模式的继承 7.找出字符串中第一次只出现一次的字母 8.找元素的第n级父元素 9. 返回元素的第n个兄弟节点 10.封装mychildren,解决浏览器的兼容问题 11.判断元素有没有子元素 12.我一个元素插入到另一个元素的后面 13.返回当前的时间(年月日时分秒) 14.获得滚动条的滚动距离 15.获得视口的尺寸 16.获取任一元素的任意属性 17.绑定事件的

  • 基于jQuery的ajax方法封装

    ajax (ajax开发)简介 AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScript和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 在实际的项目里,ajax的应用频率很高

  • 详解JavaScript中new操作符的解析和实现

    前言 new 运算符是我们在用构造函数创建实例的时候使用的,本文来说一下 new 运算符的执行过程和如何自己实现一个类似 new 运算符的函数. new 运算符的运行过程 new 运算符的主要目的就是为我们创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例(比如箭头函数就没有构造函数,所以是不能 new 的).new 操作符的执行大概有以下几个步骤: 创建一个新的空对象 把新对象的 __proto__ 链接到构造函数的 prototype 对象(每一个用户定义函数都有一个 proto

  • JavaScript中new操作符的原理示例详解

    JavaScript中new操作符的原理示例详解

    new的用处 new的作用是通过构造函数来创建一个实例对象,该实例与原型和构造函数之间的关系如下图所示: 先来总结一下 创建一个空对象 空对象的内部属性 __proto__ 赋值为构造函数的 prototype 属性 将构造函数的 this 指向空对象 执行构造函数内部代码 返回该新对象 详细说明 执行 new 操作时会依次经过以下步骤: 1.创建一个空对象 空对象是 Object 的实例,即 {} . let obj = {} 2.空对象的内部属性 __proto__ 赋值为构造函数的 pro

  • WebWorker 封装 JavaScript 沙箱详情

    WebWorker 封装 JavaScript 沙箱详情

    目录 1.场景 2.实现 IJavaScriptShadowbox 2.1 主线程的实现 2.2 web worker 线程的实现 3.使用 WebWorkerShadowbox/WebWorkerEventEmitter 4.限制 web worker 全局 api 5.web worker 沙箱的主要优势 1.场景 在前文  quickjs 封装 JavaScript 沙箱详情 已经基于 quickjs 实现了一个沙箱,这里再基于 web worker实现备用方案.如果你不知道 web wo

  • quickjs 封装 JavaScript 沙箱详情

    quickjs 封装 JavaScript 沙箱详情

    目录 1.场景 2.简化底层 api 2.1自动调用 dispose 2.2 提供更好的创建 vm 值的方法 3.实现 console/setTimeout/setInterval 等常见 api 3.1 实现 console 3.2 实现 setTimeout 3.3 实现 setInterval 3.4 实现事件循环 4.实现沙箱与系统之间的通信 5.实现 IJavaScriptShadowbox 6.目前 quickjs 沙箱的限制 1.场景 在前文JavaScript 沙箱探索 中声明了

  • JavaScript中new操作符的原理与实现详解

    目录 一.new做了哪些事 二.返回不同类型时有哪些表现 三.手写new的实现原理 一.new做了哪些事 先看看new的使用场景: // 1.创建一个构造函数 function Vehicle(name, price) { this.name = name this.price = price } ​ // 2.new一个实例对象 let truck = new Vehicle() console.log(truck); //Vehicle { name: undefined, price: u

随机推荐