JS new原理和代码实现
2019-03-30 16:39
218 查看
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39816673/article/details/88914512
[code] var Fn=function(){ this.name='hty' } const fn=new Fn;
当new Fn执行的时候,内部执行过程如下:
- 一个继承自Fn.prototype的新对象被创建。
- 使用指定的参数调用构造函数Fn,并将this绑定到新创建的对象。new Fn等同于new Fn(),也就是没有指定参数列表,Fn 不带任何参数调用的情况。
- 由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤),这里需要注意,如果构造返回的不是对象,则不管return语句,返回步骤1创建的对象。
手动实现
[code] var New =function(fn){ var obj={}; obj.__proto__=fn.prototype; // 将 arguments 对象转为数组 var args = [].slice.call(arguments); //去除构造函数 args.shift(); // 执行构造函数并改变this对象 var result = fn.apply(obj, args); if(Object.prototype.toString.call(result)=="[object Object]" ){ return result }else{ return obj; } }
测试
[code] var New =function(fn){ var obj={}; obj.__proto__=fn.prototype; // 将 arguments 对象转为数组 var args = [].slice.call(arguments); //去除构造函数 args.shift(); // 执行构造函数并改变this对象 var result = fn.apply(obj, args); if(Object.prototype.toString.call(result)=="[object Object]" ){ return result }else{ return obj; } } var Fn=function(sex){ this.name='hty'; this.sex=sex; } //返回一个对象 var Fn1=function(){ this.name='hml'; return { name:'hty1' } } //返回非对象 var Fn2=function(){ this.name='hty3'; return 1000 } const fn=New(Fn,'123'); console.log(fn.name);//hty console.log(fn.sex);//123 const fn1=New(Fn1) console.log(fn1.name);//hty1 const fn2=New(Fn2) console.log(fn2.name);//hty1
相关文章推荐
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- JS 实现2+2=5的代码 实现原理解析
- js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
- js实现网页图片延时加载的原理和代码 提高网站打开速度
- js实现局部页面打印预览原理及示例代码
- js实现键盘操作实现div的移动或改变的原理及代码
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
- js实现网页图片延时加载的原理和代码
- js版扫雷实现代码 原理不错
- js实现键盘操作实现div的移动或改变的原理及代码
- js实现键盘操作实现div的移动或改变的原理及代码
- js实现div闪烁原理及实现代码
- three.js实现3D影院的原理的代码分析
- JS拖拽元素原理及实现代码
- js实现div闪烁原理及实现代码
- 通过JS自动隐藏手机浏览器的地址栏实现原理与代码
- js实现网页图片延时加载的原理和代码
- js实现网页图片延时加载的原理和代码【转】
- JS拖拽元素原理及实现代码