`

javaScript中的new实现原理

阅读更多

1.创建一个新对象;[var o = new Object();]

2. 新对象prototype指向传入function的prototype

3.将构造函数的作用域赋给新对象(因此this指向了这个新对象);[Person.apply(o)]  [Person原来的this指向的是window]

4.执行构造函数中的代码(为这个新对象添加属性);

5.返回新对象。

 

function Person(name, age) {
     this.name = name;
     this.age = age;
     this.sayName = function() {
         alert(this.name);
     }
}
 
function newClass(P) {
 
    var o = new Object();
 
    var args = Array.prototype.slice.call(arguments, 1);
 
    o.__proto__ = P.prototype;
 
    P.prototype.constructor = P;
 
    P.apply(o, args);
 
    return o;
 
}
 //p2为p1的实现原理.由于prototype是直接的指针引用。所以prototype中的值引用类型都是共享的。构造中的参数不是共享的 
var p1 = new Person('111',12);
var p2 = newClass(Person,'111',12); 
 

  

console.log(p1.constructor);
console.log(p1.ceshi);
console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~`");
console.log(p2.constructor);
console.log(p2.ceshi);

 

 

 

 

分享到:
评论

相关推荐

    Javascript模拟实现new原理解析

    主要介绍了Javascript模拟实现new原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的...

    【JavaScript源代码】Vue router-view和router-link的实现原理.docx

    Vue router-view和router-link的实现原理  使用  <div id="app"> 首页</router-link> 关于</router-link> <router-view a=1><router-view/> </div> router-view组件  export default { //函数式组件没有...

    JS 类的创建继承 与 new原理实现

    3. new 的原理实现 学习和参考于: JS定义类的六种方式详解 JS实现继承的几种方式 JavaScript深入之创建对象的多种方式以及优缺点 js new一个对象的过程,实现一个简单的new方法 (一)类的创建 1. 工厂模式 ...

    理解Javascript_07_理解instanceof实现原理

    instanceof原理 照惯例,我们先来看一段代码: 代码如下: function Cat(){} Cat.prototype = {} function Dog(){} Dog.prototype ={} var dog1 = new Dog(); alert(dog1 instanceof Dog);//true alert(...

    【JavaScript源代码】JavaScript中的几种继承方法示例.docx

     原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father()。 这里先简单介绍下原型 js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型。js中每个函数都有一个prototype...

    yangyunhai#FrontendPeople#2.new的实现原理1

    1、创建一个空对象 obj 2、将该对象 obj 的原型链 proto 指向构造函数的原型 prototype, 3、传入参数,并让 构造函数 Fn 改变指向到

    Javascript动画的实现原理浅析

    假设有这样一个动画功能需求:把一个div的宽度从100px变化到200px。写出来的代码可能是这样的: 代码如下: ... var startTime = new Date(),  startValue = parseInt(element.style.width),  step = 1

    JavaScript ES6 Class类实现原理详解

    JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数。 例如: function Mold(a,b){ this.a=a; this.b=b; } Mold.prototype.count=function(){ return this.a+this.b; }; let ...

    在ASP.NET使用JavaScript显示信息提示窗口实现原理及代码

    在ASP.NET使用JavaScript显示信息窗口,你可下从Insus.NET的博客,下载一个DLL,放在站点的BIN目录。下载地址创建一个aspx页面,然后在.aspx.cs的做... StringBuilder sb = new StringBuilder(); sb.Append(“window.o

    前端Javascript相关面试基础问答整理md

    6. new的原理 7. 如何正确判断this? 8. 闭包及其作用 9. 原型和原型链 10. prototype与__proto__的关系与区别 11. 继承的实现方式及比较 12. 深拷贝与浅拷贝 13. 防抖和节流 14. 作用域和作用域链、执行期上下文 15...

    JavaScript new对象的四个过程实例浅析

    主要介绍了JavaScript new对象的四个过程,结合实例形式简单分析了javascript面向对象程序设计中new对象的四个过程相关原理与实现方法,需要的朋友可以参考下

    JavaScript实现算术平方根算法-代码超简单

    源码是c语言写的,我思考后发现这样的算法在javascript中也是可以完成的。 function InvSqrt(x){ var h=0.5*x; var b=new ArrayBuffer(4); var d=new DataView(b,0); d.setFloat32(0,x); var i=d.getInt32(0);...

    JavaScript结合AJAX_stream实现流式显示

    流式实现 原理就是设置定时器,定时的查看AJAX对象的状态并更新内容,如果传送完成,就取消定时器。 代码如下: function ajax_stream(url,data,element) {  var xmlHttp=null;  if (window.XMLHttpRequest)  {//...

    【JavaScript源代码】js实现上传图片功能.docx

     前端上传图片的原理是:运用input type=“file”的标签获取图片,再使用FileReader这个对象 new 一个实例,通过这个对象的readAsDataURL()方法读取file标签获取的图片并转换为base64格式,完成之后通过ajax之类的...

    JavaScript构造函数原理及实现流程解析

    在学习构造函数之前我们需要知道我们学习构造函数需要学习什么: ...2.当我们需要调用构造函数时我们需要new <构造函数>,也就是产生一个实例化对象。 function Student(name,age,sex,height){ this.name=name;

    理解Javascript_11_constructor实现原理

    var foo = new Foo(); alert(foo.constructor);//Foo alert(Foo.constructor);//Function alert(Object.constructor);//Function alert(Function.constructor);//Function 对于foo...

    javascript类继承机制的原理分析

    目前 javascript的实现继承方式并不是通过“extend”关键字来实现的,而是通过 constructor function和prototype属性来实现继承。首先我们创建一个animal 类 js 代码 代码如下: var animal = function (){ //这就是...

    JS学习笔记之数组去重实现方法小结

    本文实例讲述了JS学习笔记之数组去重实现方法。分享给大家供大家参考,具体如下: 操作的数组 let arr=[0,1,23,'1',4,2,8,5,5,6,9,'asdasd','5'] 1、 利用ES6 的set 来进行数组去重 console.time("set") let...

Global site tag (gtag.js) - Google Analytics