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

Javascript new 原理及模拟new

阅读更多

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>
 

 

分享到:
评论
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对象

相关推荐

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均

    级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,级联H桥SVG无功补偿系统在不平衡电网中的三层控制策略:电压电流双闭环PI控制、相间与相内电压均衡管理,不平衡电网下的svg无功补偿,级联H桥svg无功补偿statcom,采用三层控制策略。 (1)第一层采用电压电流双闭环pi控制,电压电流正负序分离,电压外环通过产生基波正序有功电流三相所有H桥模块直流侧平均电压恒定,电流内环采用前馈解耦控制; (2)第二层相间电压均衡控制,注入零序电压,控制通过注入零序电压维持相间电压平衡; (3)第三层相内电压均衡控制,使其所有子模块吸收的有功功率与其损耗补,从而保证所有H桥子模块直流侧电压值等于给定值。 有参考资料。 639,核心关键词: 1. 不平衡电网下的SVG无功补偿 2. 级联H桥SVG无功补偿STATCOM 3. 三层控制策略 4. 电压电流双闭环PI控制 5. 电压电流正负序分离 6. 直流侧平均电压恒定 7. 前馈解耦控制 8. 相间电压均衡控制 9. 零序电压注入 10. 相内电压均衡控制 以上十个关键词用分号分隔的格式为:不

    GTX 1080 PCB图纸

    GTX 1080 PCB图纸,内含图纸查看软件

    深度优化与应用:提升DeepSeek润色指令的有效性和灵活性指南

    内容概要:本文档详细介绍了利用 DeepSeek 进行文本润色和问答交互时提高效果的方法和技巧,涵盖了从明确需求、提供适当上下文到尝试开放式问题以及多轮对话的十个要点。每一部分内容都提供了具体的示范案例,如指定回答格式、分步骤提问等具体实例,旨在指导用户更好地理解和运用 DeepSeek 提升工作效率和交流质量。同时文中还强调了根据不同应用场景调整提示词语气和风格的重要性和方法。 适用人群:适用于希望通过优化提问技巧以获得高质量反馈的企业员工、科研人员以及一般公众。 使用场景及目标:本文针对所有期望提高 DeepSeek 使用效率的人群,帮助他们在日常工作中快速获取精准的答案或信息,特别是在撰写报告、研究材料准备和技术咨询等方面。此外还鼓励用户通过不断尝试不同形式的问题表述来进行有效沟通。 其他说明:该文档不仅关注实际操作指引,同样重视用户思维模式转变——由简单索取答案向引导 AI 辅助创造性解决问题的方向发展。

    基于FPGA与W5500实现的TCP网络通信测试平台开发-Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivad

    基于FPGA与W5500实现的TCP网络通信测试平台开发——Zynq扩展口Verilog编程实践,基于FPGA与W5500芯片的TCP网络通信测试及多路Socket实现基于zynq开发平台和Vivado 2019软件的扩展开发,基于FPGA和W5500的TCP网络通信 测试平台 zynq扩展口开发 软件平台 vivado2019.2,纯Verilog可移植 测试环境 压力测试 cmd命令下ping电脑ip,同时采用上位机进行10ms发包回环测试,不丢包(内部数据回环,需要时间处理) 目前实现单socket功能,多路可支持 ,基于FPGA; W5500; TCP网络通信; Zynq扩展口开发; 纯Verilog可移植; 测试平台; 压力测试; 10ms发包回环测试; 单socket功能; 多路支持。,基于FPGA与W5500的Zynq扩展口TCP通信测试:可移植Verilog实现的高效网络通信

    Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储,报表生成与打印一体化解决方案 ,Labview液压比例阀

    Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警及记录、自动实验、数据处理与查询存储,报表生成与打印一体化解决方案。,Labview液压比例阀伺服阀试验台多功能程序:PLC通讯、液压动画模拟、手动控制与调试、传感器标定、报警管理及实验自动化,labview液压比例阀伺服阀试验台程序:功能包括,同PLC通讯程序,液压动画,手动控制及调试,传感器标定,报警设置及报警记录,自动实验,数据处理曲线处理,数据库存储及查询,报表自动生成及打印,扫码枪扫码及信号录入等~ ,核心关键词:PLC通讯; 液压动画; 手动控制及调试; 传感器标定; 报警设置及记录; 自动实验; 数据处理及曲线处理; 数据库存储及查询; 报表生成及打印; 扫码枪扫码。,Labview驱动的智能液压阀测试系统:多功能控制与数据处理

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

    华为、腾讯、万科员工职业发展体系建设与实践.pptx

    基于遗传算法的柔性车间调度优化 附Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    电网不对称故障下VSG峰值电流限制的柔性控制策略:实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略:兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电

    电网不对称故障下VSG峰值电流限制的柔性控制策略:实现电流平衡与功率容量的优化利用,电网不对称故障下VSG峰值电流限制的柔性控制策略:兼顾平衡电流与功率控制切换的动态管理,电网不对称故障下VSG峰值电流限制的柔性不平衡控制(文章完全复现)。 提出一种在不平衡运行条件下具有峰值电流限制的可变不平衡电流控制方法,可灵活地满足不同操作需求,包括电流平衡、有功或无功恒定运行(即电流控制、有功控制或无功控制之间的相互切),注入电流保持在安全值内,以更好的利用VSG功率容量。 关键词:VSG、平衡电流控制、有功功率控制、无功功率控制。 ,VSG; 峰值电流限制; 柔性不平衡控制; 电流平衡控制; 有功功率控制; 无功功率控制。,VSG柔性控制:在电网不对称故障下的峰值电流限制与平衡管理

    libpinyin-tools-0.9.93-4.el7.x64-86.rpm.tar.gz

    1、文件内容:libpinyin-tools-0.9.93-4.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/libpinyin-tools-0.9.93-4.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    机器学习(预测模型):动漫《龙珠》相关的数据集

    数据集是一个以经典动漫《龙珠》为主题的多维度数据集,广泛应用于数据分析、机器学习和图像识别等领域。该数据集由多个来源整合而成,涵盖了角色信息、战斗力、剧情片段、台词以及角色图像等多个方面。数据集的核心内容包括: 角色信息:包含《龙珠》系列中的主要角色及其属性,如名称、种族、所属系列(如《龙珠》《龙珠Z》《龙珠超》等)、战斗力等级等。 图像数据:提供角色的图像资源,可用于图像分类和角色识别任务。这些图像来自动画剧集、漫画和相关衍生作品。 剧情与台词:部分数据集还包含角色在不同故事中的台词和剧情片段,可用于文本分析和自然语言处理任务。 战斗数据:记录角色在不同剧情中的战斗力变化和战斗历史,为研究角色成长和剧情发展提供支持。 数据集特点 多样性:数据集整合了角色、图像、文本等多种类型的数据,适用于多种研究场景。 深度:不仅包含角色的基本信息,还涵盖了角色的成长历程、技能描述和与其他角色的互动关系。 实用性:支持多种编程语言(如Python、R)的数据处理和分析,提供了详细的文档和示例代码。

    基于protues仿真的多功公交站播报系统设计(仿真图、源代码)

    基于protues仿真的多功公交站播报系统设计(仿真图、源代码) 该设计为基于protues仿真的多功公交站播报系统,实现温度显示、时间显示、和系统公交站播报功能; 具体功能如下: 1、系统使用51单片机为核心设计; 2、时钟芯片进行时间和日期显示; 3、温度传感器进行温度读取; 4、LCD12864液晶屏进行相关显示; 5、按键设置调节时间; 6、按键设置报站; 7、仿真图、源代码; 操作说明: 1、下行控制报站:首先按下(下行设置按键),(下行指示灯)亮,然后按下(手动播报)按键控制播报下一站; 2、上行控制报站:首先按上(上行设置按键),(上行指示灯)亮,然后按下(手动播报)按键控制播报下一站; 3、按下关闭播报按键,则关闭播报功能和清除显示

    基于微信小程序的琴房管理系统的设计与实现.zip

    采用Java后台技术和MySQL数据库,在前台界面为提升用户体验,使用Jquery、Ajax、CSS等技术进行布局。 系统包括两类用户:学生、管理员。 学生用户 学生用户只要实现了前台信息的查看,打开首页,查看网站介绍、琴房信息、在线留言、轮播图信息公告等,通过点击首页的菜单跳转到对应的功能页面菜单,包括网站首页、琴房信息、注册登录、个人中心、后台登录。 学生用户通过账户账号登录,登录后具有所有的操作权限,如果没有登录,不能在线预约。学生用户退出系统将注销个人的登录信息。 管理员通过后台的登录页面,选择管理员权限后进行登录,管理员的权限包括轮播公告管理、老师学生信息管理和信息审核管理,管理员管理后点击退出,注销登录信息。 管理员用户具有在线交流的管理,琴房信息管理、琴房预约管理。 在线交流是对前台用户留言内容进行管理,删除留言信息,查看留言信息。

    界面GUI设计MATLAB教室人数统计.zip

    MATLAB可以用于开发人脸识别考勤系统。下面是一个简单的示例流程: 1. 数据采集:首先收集员工的人脸图像作为训练数据集。可以要求员工提供多张照片以获得更好的训练效果。 2. 图像预处理:使用MATLAB的图像处理工具对采集到的人脸图像进行预处理,例如灰度化、裁剪、缩放等操作。 3. 特征提取:利用MATLAB的人脸识别工具包,如Face Recognition Toolbox,对处理后的图像提取人脸特征,常用的方法包括主成分分析(PCA)和线性判别分析(LDA)等。 4. 训练模型:使用已提取的人脸特征数据集训练人脸识别模型,可以选择支持向量机(SVM)、卷积神经网络(CNN)等算法。 5. 考勤系统:在员工打卡时,将摄像头捕获的人脸图像输入到训练好的模型中进行识别,匹配员工信息并记录考勤数据。 6. 结果反馈:根据识别结果,可以自动生成考勤报表或者实时显示员工打卡情况。 以上只是一个简单的步骤,实际开发过程中需根据具体需求和系统规模进行定制和优化。MATLAB提供了丰富的图像处理和机器学习工具,是开发人脸识别考勤系统的一个很好选择。

    hjbvbnvhjhjg

    hjbvbnvhjhjg

    HCIP、软考相关学习PPT

    HCIP、软考相关学习PPT提供下载

    绿豆BOX UI8版:反编译版六个全新UI+最新后台直播管理源码

    绿豆BOX UI8版:反编译版六个全新UI+最新后台直播管理源码 最新绿豆BOX反编译版六个UI全新绿豆盒子UI8版本 最新后台支持直播管理 作为UI6的升级版,UI8不仅修复了前一版本中存在的一些BUG,还提供了6套不同的UI界面供用户选择,该版本有以下特色功能: 在线管理TVBOX解析 在线自定义TVBOX 首页布局批量添加会员信息 并支持导出批量生成卡密 并支持导出直播列表管理功能

    vue3的一些语法以及知识点

    vue3的一些语法以及知识点

    西门子大型Fanuc机器人汽车焊装自动生产线程序经典解析:PLC博图编程与MES系统通讯实战指南,西门子PLC博图汽车焊装自动生产线FANUC机器人程序经典结构解析与MES系统通讯,西门子1500 大

    西门子大型Fanuc机器人汽车焊装自动生产线程序经典解析:PLC博图编程与MES系统通讯实战指南,西门子PLC博图汽车焊装自动生产线FANUC机器人程序经典结构解析与MES系统通讯,西门子1500 大型程序fanuc 机器人汽车焊装自动生产线程序 MES 系统通讯 大型程序fanuc机器人汽车焊装自动生产线程序程序经典结构清晰,SCL算法堆栈,梯形图和 SCL混编使用博图 V14以上版本打开 包括: 1、 PLC 博图程序 2 触摸屏程序 ,西门子1500; 大型程序; fanuc机器人; 汽车焊装自动生产线; MES系统通讯; SCL算法; 梯形图; SCL混编; 博图V14以上版本。,西门子博图大型程序:汽车焊装自动生产线MES系统通讯与机器人控制

    DeepSeek:从入门到精通

    DeepSeek:从入门到精通

    计及信息间隙决策与多能转换的综合能源系统优化调度模型:实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型:源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多

    计及信息间隙决策与多能转换的综合能源系统优化调度模型:实现碳经济最大化与源荷不确定性考量,基于信息间隙决策与多能转换的综合能源系统优化调度模型:源荷不确定性下的高效碳经济调度策略,计及信息间隙决策及多能转的综合能源系统优化调度 本代码构建了含风电、光伏、光热发电系统、燃气轮机、燃气锅炉、电锅炉、储气、储电、储碳、碳捕集装置的综合能源系统优化调度模型,并考虑P2G装置与碳捕集装置联合运行,从而实现碳经济的最大化,最重要的是本文引入了信息间隙决策理论考虑了源荷的不确定性(本代码的重点)与店铺的47代码形成鲜明的对比,注意擦亮眼睛,认准原创,该代码非常适合修改创新,,提供相关的模型资料 ,计及信息间隙决策; 综合能源系统; 优化调度; 多能转换; 碳经济最大化; 风电; 光伏; 燃气轮机; 储气; 储电; 储碳; 碳捕集装置; P2G装置联合运行; 模型资料,综合能源系统优化调度模型:基于信息间隙决策和多能转换的原创方案

Global site tag (gtag.js) - Google Analytics