福建建设执业资格中心网站,网站中信息更新怎么做的,金蝶软件怎么打印凭证,wordpress 右拉可以点击上方的话题JS基础系列#xff0c;查看往期文章这篇文章写于2018年11月05日#xff0c;new模拟实现#xff0c;Object.create是面试高频考点#xff0c;之前发布在掘金有近2万人阅读#xff0c;现在发布到公众号声明原创。1. 前言这是面试官问系列的第一篇#xf… 可以点击上方的话题JS基础系列查看往期文章这篇文章写于2018年11月05日new模拟实现Object.create是面试高频考点之前发布在掘金有近2万人阅读现在发布到公众号声明原创。1. 前言这是面试官问系列的第一篇旨在帮助读者提升JS基础知识包含new、call、apply、this、继承相关知识。面试官问系列文章如下感兴趣的读者可以点击阅读。1.面试官问能否模拟实现JS的new操作符2.面试官问能否模拟实现JS的bind方法3.面试官问能否模拟实现JS的call和apply方法4.面试官问JS的this指向5.面试官问JS的继承用过Vuejs的同学都知道需要用new操作符来实例化。new Vue({el: #app,mounted(){},
});
那么面试官可能会问是否想过new到底做了什么怎么模拟实现呢。附上之前写文章写过的一段话已经有很多模拟实现new操作符的文章为什么自己还要写一遍呢。学习就好比是座大山人们沿着不同的路登山分享着自己看到的风景。你不一定能看到别人看到的风景体会到别人的心情。只有自己去登山才能看到不一样的风景体会才更加深刻。2. new 做了什么先看简单例子1// 例子1
function Student(){
}
var student new Student();
console.log(student); // {}
// student 是一个对象。
console.log(Object.prototype.toString.call(student)); // [object Object]
// 我们知道平时声明对象也可以用new Object(); 只是看起来更复杂
// 顺便提一下 new Object(不推荐)和Object()也是一样的效果
// 可以猜测内部做了一次判断用new调用
/** if (!(this instanceof Object)) {
* return new Object();
* }
*/
var obj new Object();
console.log(obj) // {}
console.log(Object.prototype.toString.call(student)); // [object Object]typeof Student function // true
typeof Object function // true
从这里例子中我们可以看出一个函数用new操作符来调用后生成了一个全新的对象。而且Student和Object都是函数只不过Student是我们自定义的Object是JS本身就内置的。再来看下控制台输出图感兴趣的读者可以在控制台试试。例子1 控制台输出图与new Object() 生成的对象不同的是new Student()生成的对象中间还嵌套了一层__proto__它的constructor是Student这个函数。// 也就是说
student.constructor Student;
Student.prototype.constructor Student;
2.1 小结1从这个简单例子来看new操作符做了两件事创建了一个全新的对象。这个对象会被执行[[Prototype]]也就是__proto__链接。接下来我们再来看升级版的例子2// 例子2
function Student(name){console.log(赋值前-this, this); // {}this.name name;console.log(赋值后-this, this); // {name: 若川}
}
var student new Student(若川);
console.log(student); // {name: 若川}
由此可以看出这里Student函数中的this指向new Student()生成的对象student。2.2 小结2从这个例子来看new操作符又做了一件事生成的新对象会绑定到函数调用的this。接下来继续看升级版例子3// 例子3
function Student(name){this.name name;// this.doSth();
}
Student.prototype.doSth function() {console.log(this.name);
};
var student1 new Student(若);
var student2 new Student(川);
console.log(student1, student1.doSth()); // {name: 若} 若
console.log(student2, student2.doSth()); // {name: 川} 川
student1.__proto__ Student.prototype; // true
student2.__proto__ Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是
Object.getPrototypeOf(student1) Student.prototype; // true
Object.getPrototypeOf(student2) Student.prototype; // true
例子3 控制台输出图关于JS的原型关系我之前看到这张图觉得很不错分享给大家。2.3 小结3这个例子3再一次验证了小结1中的第2点。也就是这个对象会被执行[[Prototype]]也就是__proto__链接。并且通过new Student()创建的每个对象将最终被[[Prototype]]链接到这个Student.protytype对象上。细心的同学可能会发现这三个例子中的函数都没有返回值。那么有返回值会是怎样的情形呢。那么接下来请看例子4// 例子4
function Student(name){this.name name;// Null空 null// Undefined未定义 undefined// Number数字 1// String字符串1// Boolean布尔 true// Symbol符号第六版新增 symbol// Object对象 {}// Function函数 function(){}// Array数组 []// Date日期 new Date()// RegExp正则表达式/a/// Error 错误 new Error()// return /a/;
}
var student new Student(若川);
console.log(student); {name: 若川}
我测试这七种类型后MDN JavaScript类型得出的结果是前面六种基本类型都会正常返回{name: 若川}后面的Object(包含Functoin, Array, Date, RegExg, Error)都会直接返回这些值。2.4 由此得出 小结4如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)那么new表达式中的函数调用会自动返回这个新的对象。结合这些小结整理在一起就是创建了一个全新的对象。这个对象会被执行[[Prototype]]也就是__proto__链接。生成的新对象会绑定到函数调用的this。通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)那么new表达式中的函数调用会自动返回这个新的对象。3. new 模拟实现知道了这些现象我们就可以模拟实现new操作符。直接贴出代码和注释/*** 模拟实现 new 操作符* param {Function} ctor [构造函数]* return {Object|Function|Regex|Date|Error} [返回结果]*/
function newOperator(ctor){if(typeof ctor ! function){throw newOperator function the first param must be a function;}// ES6 new.target 是指向构造函数newOperator.target ctor;// 1.创建一个全新的对象// 2.并且执行[[Prototype]]链接// 4.通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。var newObj Object.create(ctor.prototype);// ES5 arguments转成数组 当然也可以用ES6 [...arguments], Aarry.from(arguments);// 除去ctor构造函数的其余参数var argsArr [].slice.call(arguments, 1);// 3.生成的新对象会绑定到函数调用的this。// 获取到ctor函数返回结果var ctorReturnResult ctor.apply(newObj, argsArr);// 小结4 中这些类型中合并起来只有Object和Function两种类型 typeof null 也是object所以要不等于null排除nullvar isObject typeof ctorReturnResult object ctorReturnResult ! null;var isFunction typeof ctorReturnResult function;if(isObject || isFunction){return ctorReturnResult;}// 5.如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)那么new表达式中的函数调用会自动返回这个新的对象。return newObj;
}
最后用模拟实现的newOperator函数验证下之前的例子3// 例子3 多加一个参数
function Student(name, age){this.name name;this.age age;// this.doSth();// return Error();
}
Student.prototype.doSth function() {console.log(this.name);
};
var student1 newOperator(Student, 若, 18);
var student2 newOperator(Student, 川, 18);
// var student1 new Student(若);
// var student2 new Student(川);
console.log(student1, student1.doSth()); // {name: 若} 若
console.log(student2, student2.doSth()); // {name: 川} 川student1.__proto__ Student.prototype; // true
student2.__proto__ Student.prototype; // true
// __proto__ 是浏览器实现的查看原型方案。
// 用ES5 则是
Object.getPrototypeOf(student1) Student.prototype; // true
Object.getPrototypeOf(student2) Student.prototype; // true
可以看出很符合new操作符。读者发现有不妥或可改善之处欢迎指出。回顾这个模拟new函数newOperator实现最大的功臣当属于Object.create()这个ES5提供的API。4. Object.create() 用法举例我之前整理的一篇文章中也有讲过可以翻看JavaScript 对象所有API解析MDN Object.create()Object.create(proto, [propertiesObject])方法创建一个新对象使用现有的对象来提供新创建的对象的__proto__。它接收两个参数不过第二个可选参数是属性描述符不常用默认是undefined。var anotherObject {name: 若川
};
var myObject Object.create(anotherObject, {age: {value18,},
});
// 获得它的原型
Object.getPrototypeOf(anotherObject) Object.prototype; // true 说明anotherObject的原型是Object.prototype
Object.getPrototypeOf(myObject); // {name: 若川} // 说明myObject的原型是{name: 若川}
myObject.hasOwnProperty(name); // false; 说明name是原型上的。
myObject.hasOwnProperty(age); // true 说明age是自身的
myObject.name; // 若川
myObject.age; // 18;
对于不支持ES5的浏览器MDN上提供了ployfill方案。if (typeof Object.create ! function) {Object.create function (proto, propertiesObject) {if (typeof proto ! object typeof proto ! function) {throw new TypeError(Object prototype may only be an Object: proto);} else if (proto null) {throw new Error(This browsers implementation of Object.create is a shim and doesnt support null as the first argument.);}if (typeof propertiesObject ! undefined) throw new Error(This browsers implementation of Object.create is a shim and doesnt support a second argument.);function F() {}F.prototype proto;return new F();};
}
到此文章就基本写完了。感谢读者看到这里。5. 最后总结一下new做了什么创建了一个全新的对象。这个对象会被执行[[Prototype]]也就是__proto__链接。生成的新对象会绑定到函数调用的this。通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。如果函数没有返回对象类型Object(包含Functoin, Array, Date, RegExg, Error)那么new表达式中的函数调用会自动返回这个新的对象。怎么模拟实现// 去除了注释
function newOperator(ctor){if(typeof ctor ! function){throw newOperator function the first param must be a function;}newOperator.target ctor;var newObj Object.create(ctor.prototype);var argsArr [].slice.call(arguments, 1);var ctorReturnResult ctor.apply(newObj, argsArr);var isObject typeof ctorReturnResult object ctorReturnResult ! null;var isFunction typeof ctorReturnResult function;if(isObject || isFunction){return ctorReturnResult;}return newObj;
}
读者发现有不妥或可改善之处欢迎指出。另外觉得写得不错可以点个赞也是对我的一种支持。推荐阅读我在阿里招前端我该怎么帮你现在还可以加模拟面试群如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办若川知乎高赞有哪些必看的 JS库末尾你好我是若川江湖人称菜如若川历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)关注若川视野回复pdf 领取优质前端书籍pdf回复1可加群长期交流学习我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以点个在看呀^_^另外欢迎留言交流精选前端好文伴你不断成长我是若川欢迎关注!可点击小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读也可以星标我的公众号便于查找
