Javascript new 原理及模拟new

rainsilence

浏览: 161547 次
性别:
来自: 上海

最近访客更多访客>>

zhang55090

iop118

cjh326419411

finit

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript prototype HTML Windows

js的new可以看成是一个代理模式的代理类。包裹了new 后面的函数

处理顺序为
1.创建一个function对象，并将prototype设置为传入函数
2.执行传入函数
3.判断传入函数返回值，如果为null，则返回第一步的function对象。

实现代码：

模拟一个new。封装在newInstance方法里。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
    function Animal(name) {
        this.name = name;
    }
    Animal.prototype.sayName = function() {
        alert("My name is " + this.name);
    }
    function newInstance(fn) {
        var Class = function() {};
        Class.prototype = fn.prototype;
        var slice = Array.prototype.slice;
        var args = slice.call(arguments);
        args.splice(0, 1);
        var instance = new Class();
        instance.constructor = fn;
        var result = fn.apply(instance, args);
        return (result != null) ? result : instance;
    }
    // 以上代码等同于new Animal("Jack")
    var cat = newInstance(Animal, "Jack");
    cat.sayName();
    alert(cat instanceof Animal); // true
</script>


</head>
<body>
    
</body>
</html>

分享到：

模拟google电吉他2.1GA发布,可录音&支持 ... | 基于ECMAScript5的继承链实现

2011-05-10 14:15
浏览 1984
评论(18)
论坛回复 / 浏览 (18 / 8273)
分类:Web前端
查看更多

18 楼 rainsilence 2011-05-23

int08h 写道

prototypal inheritance能理解的人自然理解了也没什么好提的，不理解的人自然无法理解提不出啥，当然回不了那贴子了……
不过我对instanceof失效倒是感觉蛮遗憾的，一个语法层面上的东西，现在使用一个函数去弥补，总觉得别扭
比如我的某绘图工具里就有
if (shape instanceof Rectangle) {

}
else if (shape instanceof Circle) {

}
else {
var drawer = getDrawerFromConfig(shape);
drawer.draw();
}

哈哈，遇到知音啦。。我写得绘图工具里一开始也是这样

if (shape instanceof Rectangle) {

}
else if (shape instanceof Circle) {

}
else {

这样的代码可以用设计模式中的合成模式来解决。
以上代码最后可以替换为
shape.draw(drawer);
然后不同的shape去调用drawer不同的方法（利用shape中的Composite方法）。但是Circle这样的类就无法单单以DTO的身份出现了,而是作为一个部分

可惜这段经典的代码我写得时候是有版权的。虽然我脑子里有备份，但是作为职业道德无法发在这里。

17 楼 int08h 2011-05-23

16 楼 rainsilence 2011-05-23

zhanghh321 写道

我不是很理解楼主的意图：
我这么写
<script>
function f(){

}
var o2=new f();
alert(o2 instanceof f);
</script>
结果打印的也是true啊

我这篇文章的意图在于证明new是代理模式的一个实现。你这个是常规最基本的new的使用。

15 楼 zhanghh321 2011-05-23

我不是很理解楼主的意图：
我这么写
<script>
function f(){

}
var o2=new f();
alert(o2 instanceof f);
</script>
结果打印的也是true啊

14 楼 rainsilence 2011-05-14

我觉得我另外一篇文章的技术含量远远超过这篇，并且是一个无需使用function&prototype的继承方案。。怎么没人关注。。。
http://www.iteye.com/topic/1026530

13 楼 rainsilence 2011-05-13

danny.chiu 写道

既然模拟new，具体实现里面又用到了new，有点理解不通，这篇文章目的是什么呢？在下笨，想请大家棒喝

你的想法很好啊。。

这篇文章的目的在于证明new是一种代理模式的思路。
如果一定要保证不出现new，可以变通实现
new Class改成
Object.create(Class.prototype);

12 楼 rainsilence 2011-05-13

<div class="quote_title">frederick_hai 写道</div>
<div class="quote_div">
<div class="quote_title">rainsilence 写道</div>
<div class="quote_div">
<pre name="code" class="html"> <span style="color: #ff0000;"> return (result == null) ? result : instance;</span>
</pre>
这句话逻辑错了，应该是return（result == null）? instance : result;
<p> </p>
</div>
<p> </p>
</div>
<p>恩，是啊，写的时候是return（result）? result : instance;</p>
<p>为了大家能看清楚，匆忙改的。。</p>
<p>所以测试很重要啊</p>

11 楼 frederick_hai 2011-05-13

<div class="quote_title">rainsilence 写道</div>
<div class="quote_div">
<pre name="code" class="html"> <span style="color: #ff0000;"> return (result == null) ? result : instance;</span>
</pre>
这句话逻辑错了，应该是return（result == null）? instance : result;
<p> </p>
</div>
<p> </p>

10 楼 kill_all 2011-05-13

模拟new，用来了解Javascript里面new的机制。。。。。。。
thx楼主

9 楼 danny.chiu 2011-05-13

既然模拟new，具体实现里面又用到了new，有点理解不通，这篇文章目的是什么呢？在下笨，想请大家棒喝

8 楼 rainsilence 2011-05-12

lipeng88213 写道

引用

var result = fn.apply(instance, args);

调用instance.fn()吗？怎么理解这句话？

调用fn，并且将fn中的this绑定到instance上。

7 楼 lipeng88213 2011-05-12

引用

var result = fn.apply(instance, args);

调用instance.fn()吗？怎么理解这句话？

6 楼 rainsilence 2011-05-12

danny.chiu 写道

引用

处理顺序为

1.创建一个function对象，并将prototype设置为传入函数

2.执行传入函数

3.判断传入函数返回值，如果为null，则返回第一步的function对象。

学习了，请问下出处哈！

以前也忘了是哪本书，说法和您的不太一样，因为类实例化后得到的实际上是一个对象，他的意思可以这样用代码模拟：

function A() {}

// 实例化函数

var a = {};
A.apply(a, Array.prototype.slice.call(arguments));
return a;

具体还有其他细节，比如类的prototype，回去找下，但这两种思路很不一样，请rainsilence大哥斧正。

如int08h所言。。你这样做不管是instanceof还是isPrototypeOf，都无法判断类型了。

Moreover:

Array.prototype.slice.call只是用来做数组复制，因为arguments不是完整的array。但是apply函数支持直接传递arguments。所以如果不是要删除元素的，可以不必调用。

5 楼 rainsilence 2011-05-12

int08h 写道

楼上的方法会丢失掉instanceof判定类型的能力，即：
new A() instanceof A <-- true
A() instanceof A <-- false

具体的构造过程其实是无法简单模拟的，因为涉及到2个私有属性[[Class]]和[[Construct]]
http://bclary.com/2004/11/07/#a-13.2.2

你说的是这个吧：

引用

13.2.2 [[Construct]]
When the [[Construct]] property for a Function object F is called, the following steps are taken:

1. Create a new native ECMAScript object.

2. Set the [[Class]] property of Result(1) to "Object".

3. Get the value of the prototype property of F.

4. If Result(3) is an object, set the [[Prototype]] property of Result(1) to Result(3).

5. If Result(3) is not an object, set the [[Prototype]] property of Result(1) to the original Object prototype object as described in 15.2.3.1.

6. Invoke the [[Call]] property of F, providing Result(1) as the this value and providing the argument list passed into [[Construct]] as the argument values.

7. If Type(Result(6)) is Object then return Result(6).

8. Return Result(1).

Step1,Step2可以看成我代码中的
var Class = function() {};

Step3, Step4, Step5(我这里缺少prototype==null时的判断。不过这里传进来的一般都是function，所以不需要)
Class.prototype = fn.prototype;

Step6
var result = fn.apply(instance, args);

Step7 Step8
return (result == null) ? result : instance;

虽然缺少了Class和Construct属性。但是，这两个属性都是function的。从对象上来看，不会有什么不同。为了防止对象.constructor得到函数本身，特地加了一句，这样。就算得到了constructor，也是传入function参数的(具有Class属性)，虽然Construct属性不是很完整，或者说可能不是完全一样，但是做的事情是一样的，外表上看不出来。。。。

4 楼 int08h 2011-05-11

3 楼 danny.chiu 2011-05-11

引用

处理顺序为

1.创建一个function对象，并将prototype设置为传入函数

2.执行传入函数

3.判断传入函数返回值，如果为null，则返回第一步的function对象。

学习了，请问下出处哈！

以前也忘了是哪本书，说法和您的不太一样，因为类实例化后得到的实际上是一个对象，他的意思可以这样用代码模拟：

function A() {}

// 实例化函数

var a = {};
A.apply(a, Array.prototype.slice.call(arguments));
return a;

具体还有其他细节，比如类的prototype，回去找下，但这两种思路很不一样，请rainsilence大哥斧正。

2 楼 rainsilence 2011-05-10

对，

function Test() {
    return new Object();
}

// false
alert(new Test() instanceof Test)

function Test() {
}

// true
alert(new Test() instanceof Test);

1 楼 int08h 2011-05-10

判断函数返回值这里，只要返回的是null/undefined或者所有基元类型，即不是Object的话，都会返回第一步的function对象

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论