`
rainsilence
  • 浏览: 160497 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Javascript new 原理及模拟new

JavaScriptprototypeHTMLWindows 
阅读更多

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>
 

 

分享到：
| 基于ECMAScript5的继承链实现
评论
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  
prototypal inheritance能理解的人自然理解了也没什么好提的，不理解的人自然无法理解提不出啥，当然回不了那贴子了……
不过我对instanceof失效倒是感觉蛮遗憾的，一个语法层面上的东西，现在使用一个函数去弥补，总觉得别扭
比如我的某绘图工具里就有
if (shape instanceof Rectangle) {

}
else if (shape instanceof Circle) {

}
else {
    var drawer = getDrawerFromConfig(shape);
    drawer.draw();
}
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  
楼上的方法会丢失掉instanceof判定类型的能力，即：
new A() instanceof A <-- true
A() instanceof A <-- false

具体的构造过程其实是无法简单模拟的，因为涉及到2个私有属性[[Class]]和[[Construct]]
http://bclary.com/2004/11/07/#a-13.2.2
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对象
发表评论

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

相关推荐

    【JavaScript源代码】JavaScript中new操作符的原理示例详解.docx

    通过以上的分析，我们了解了`new`操作符在JavaScript中的工作原理，包括如何创建新对象、设置原型链、绑定`this`上下文以及返回新对象。这些知识对于深入理解和使用JavaScript的面向对象编程至关重要。

    Javascript模拟训练

    通过对Javascript模拟训练题目的分析，我们可以总结出以下基础知识点： 1. 文件类型：JS文件的扩展名是“.js”，它是一种用于客户端脚本的文件类型。 2. 变量命名规则：Javascript中的变量名可以由字母、数字和...

    Javascript模拟实现new原理解析

    op: 'test' };...这种模拟实现有助于深入理解`new`关键字的工作原理以及JavaScript中对象的创建和原型链的概念。通过这种方式，我们可以更好地调试和优化代码，尤其是处理涉及构造函数和原型链的复杂情况。

    JavaScript模拟select

    ### JavaScript模拟select控件知识点详解 #### 一、引言 在前端开发中，有时我们需要对浏览器原生的`&lt;select&gt;`元素进行定制化处理，比如实现更丰富的样式或者增加额外的功能。本篇将深入探讨如何使用纯JavaScript...

    javascript模拟试题.doc

    以下是对JavaScript模拟试题中涉及的知识点的详细解释： 1. JavaScript代码通常放置在HTML的`&lt;script&gt;`标签内，正确选项是A。 2. 输出"Hello World"的正确JavaScript语法是使用`document.write("Hello World")`，...

    Javascript 面向对象的JavaScript进阶

    通常，开发者会使用闭包或者ES6的类来模拟封装。 **示例代码：** ```javascript function Person(name, age) { let _age = age; // 私有变量 this.getName = function() { return name; }; this.setAge = ...

    Vuact#Blog#JavaScript深入 模拟实现new1

    （1）创建了一个新对象 （2）这个新对象 的__proto__指向了Person的原型对象 （3）将构造函数的作用域赋给新对象（this就指向了这个新对象）

    JavaScript模拟桌面

    JavaScript模拟桌面是一个有趣的项目，它使用JavaScript这门脚本语言来构建一个类似于操作系统桌面的交互界面。这个项目可能包括创建可拖动、可缩放的窗口、任务栏、快捷方式等元素，使得用户可以在浏览器环境下体验...

    JavaScript中继承原理与用法实例入门

    本文将深入探讨JavaScript中的继承原理与用法，并通过实例进行讲解。 首先，JavaScript的对象由两部分组成：构造函数和原型。构造函数定义了对象的初始化方式，而原型则包含共享的属性和方法。在JavaScript中，每个...

    javascript期末考试模拟题.doc

    JavaScript期末考试模拟题 一、单项选择题 1. 以“.js”为文件扩展名的文件是什么类型的文件？（D）JavaScript 文件 解释： JavaScript 文件的扩展名为“.js”，该文件包含JavaScript代码，用于在Web浏览器中执行...

    浅谈javascript中new操作符的原理

    为了更好地理解这个过程，我们可以模拟`new`操作符的工作方式，编写一个名为`NEW_OBJECT`的函数，如下所示： ```javascript function NEW_OBJECT(Foo) { var obj = {}; // 创建新对象 obj.__proto__ = Foo....

    小票打印机new PrinterJobs() 核心方法

    首先，了解`new PrinterJobs()` 的工作原理。当你创建这个对象时，实际上是在建立一个对象实例，该实例包含了与打印机交互所需的方法和属性。这些方法可能包括但不限于： 1. **初始化连接**：设置打印机连接，可以...

    【JavaScript源代码】Vue模拟响应式原理底层代码实现的示例.docx

    在模拟Vue的响应式原理时，主要涉及以下几个关键组件：Observer.js、Compiler.js、Dep.js 和 Watcher.js。接下来，我们将深入探讨这些组件的功能及其底层代码实现。 1. **Vue.js 功能**： - 接收初始化参数（如...

    New-folder-(3).zip_javascript

    "New-folder-(3).zip_javascript"这个文件名暗示我们这可能是一个包含JavaScript相关代码或资源的压缩包。描述中的"qpsk signal constellation"则提到了通信技术中的一个关键概念——四相相移键控（Quadrature Phase...

    node.js 的模拟退火优化算法_JavaScript_代码_下载

    newState - 从当前状态生成新状态的函数newState(state) getTemp - 根据以前的温度生成新温度的函数getTemp(temperature) getEnergy - 用于计算状态getEnergy(state)能量的函数（越少越好） 更多详情、使用方法，

    javascript高级编程JavaScript.pdf

    为了解决这个问题，开发者引入了“命名空间”的概念，尽管JavaScript本身并不直接支持命名空间，但可以通过对象模拟实现。 命名空间的主要目的是为了组织代码，避免全局作用域中的名称冲突。在JavaScript中，我们...

    在JavaScript中模拟类(class)及类的继承关系_.docx

    在JavaScript中，尽管ES6之前其语法并不直接支持类（class）的概念，但开发者通过不同的方式模拟了类的实现和继承机制。以下是三种常见的模拟类和实现继承的方法： 1. **构造函数法**： 构造函数是JavaScript中...

    javascript new一个对象的实质

    当我们使用JavaScript的new关键字来创建一个对象的时候，实际上是在进行一个特殊的函数调用，这个过程的实质包括以下几个关键步骤： 1. 创建新对象：当我们使用new操作符和构造函数时，JavaScript首先会创建一个新...

    Javascript面向对象编程

    利用`function`作为类的定义、`new`操作符创建对象、以及`this`和`prototype`来模拟类的特性和行为，可以有效地提高代码的可读性和可维护性。通过深入理解这些概念，开发者可以更好地利用JavaScript的强大功能来构建...

Magicbox
Global site tag (gtag.js) - Google Analytics