js之new的原理和源码
2024-10-21 11:45:56
new的原理即作用:
function Student(name,age){
this.name=name;
this.age=age;
}
var stu=new Student("小明",18);
观察上述代码,Student是一个普通的构造函数,然后通过new对构造函数实例化得到了一个Student类型的数据。
实例语句里面的关系有如下三点:
①:stu.__proto__===Student.prototype;
②:根据规则,当构造函数没有参数的时候,()可以省略。故可知,Student("小明",18)并不是对构造函数的调用,这里new还主动调用了构造函数
③:new还创造了一个容器,让这个容器去调用这个构造函数,并且来装产生的数据对象,并且最后返回这个填装完毕的对象
故当你写下一个new关键字时,new实质上就做了如上三件事
new的最终目的:
创造一个构造函数类别的对象出来,就像new date造出来的是date对象,new array造出来的 是Array对象一样,并且保证这里面的一些继承关系不能乱
new关键字源码:
构造函数:
function Student(name,age){
this.name=name;
this.age=age;
}
mynew函数:
1 function mynew(fn,name,age){
2 var obj={};
3 // 修改原型关系,确定obj一定是由fn造出来的
4 obj.__proto__=fn.prototype;
5 // obj本身没有fn方法,fn是window对象的,于是obj带着借fn所要求的参数去向window借,这样的话,fn借来后obj就可以用了,fn里的this什么的指向的也就是obj了,也可用apply或bind,这也就是修改this指针的原理,this一般是谁调用指向谁
6 var result=fn.call(obj,name,age);
7 // 判断通过构造函数实例化的对象是否为对象,是的话就输出,不是的话就输出新创建的obj
8 return result instanceof Object?result:obj;
9 }
调用:
console.log(mynew(Student,"小明",18)) ;
mynew不带形参的源码,除了mynew函数略有不同,其它均相同
function mynew(){
var obj={};
// 获取函数调用时传的第一个参数,即为构造函数fn
var fn=[].shift.call(arguments);
// 修改原型关系,确定obj一定是由fn造出来的
obj.__proto__=fn.prototype;
// 修改fn的this指针,arguements必须要转为以逗号相连的数据
fn.call(obj,...arguments);
return obj;
}
console.log(mynew(Student,"小明",18)) ;
箭头函数不能写new:
注意箭头函数不能用来写new的源码,
- 箭头函数没有自己的 this,无法修改this指针
- 箭头函数没有自己的 prototype,无法修改原型对象
最新文章
- dubbox 的各种管理和监管
- Android开发学习之路-Handler消息派发机制源码分析
- sublime-text3配置编译php
- idea 用maven骨架生成项目速度慢的问题
- HTML5属性运用
- Coding the Matrix (3):矩阵
- C#线程系列讲座(1):BeginInvoke和EndInvoke方法
- js实现未知宽高的元素在指定元素中垂直水平居中
- Netty4.x分析
- 使用自定义 URL 实现控制器之间的跳转-b
- 【python】【转】if else 和 elif
- leecode 回文字符串加强版
- android--jenkins+gradle+android自动化构建apk步骤(转)
- java.util.Timer类似于闹钟定时做任务
- JavaScript的Cookie操作
- bootstrap_下拉菜单+头部
- Unit Of Work之我见
- [整理]k-vim-for-server通过vimrc修改vim格式
- 017、RUN、CMD、ENTRYPOINT (2019-01-08 周二)
- POJ3580 SuperMemo splay伸展树,区间操作