剖析 new 的内部原理
function Animal(name){
this.name = name;
}
Animal.color = 'black';
Animal.prototype.say = function(){
console.log(`I 'm ${this.name}`);
}
var cat = new Animal('cat');
new Animal('cat') = {
var obj = {};
obj.__proto__ = Animal.prototype;Ï
var result = Animal.call(obj, 'cat');
return typeof result === 'object' ? result : obj;
}
思路:
将上述流程分为4个步骤来理解：
1.创建一个空对象obj;
2.把obj的proto指向构造函数Animal的原型对象 prototype，
此时便建立了obj对象的原型链obj->Animal.prototype->Object.prototype->null
3.在obj对象的执行环境调用Animal函数并传递参数‘cat’。相当于var result = obj.Animal('cat');
当这句执行完之后，obj便产生了属性name并赋值为‘cat’。
4.考察第3步的返回值，如果无返回值或者返回一个非对象值，则将obj作为新对象返回；否则会将result作为新对象返回；
或者写为
var new1 = function(func){
var newObj = Object.create(func.prototype);
var resultObj = func.call(newObj);
if(typeof resultObj === 'object'){
return resultObj;
}else{
return newObj;
}
}
剖析call的内部原理 call(thisArgs, [, args...])
思路:
thisArgs的取值有以下四种情况：
1.不传，或者传null，undefined，函数中的this指向window对象
2.传递另一个函数的函数名，函数中的this指向这个函数的引用。
3.传递字符串、数值或布尔类型等基础类型，函数中的this指向其对应的包装对象，如String， Number，Boolean
4.传递一个对象，函数中的this指向这个对象
核心功能：它允许在一个对象上调用该对象没有定义的方法，并且这个方法可以访问该对象中的属性
换句话而言：call() 方法在使用一个制定的this值和若干个指定的参数值的前提下调用某个函数或方法。
var a = {
name: 'onepixel', // 定义a的属性
say: function(){
console.log('hi, I'm function a');
}
}
function b(name){
console.log('Post params: '+ name);
console.log('I 'm ' +this.name);
this.say();
}
b.call(a, 'test');
>>
Post params： test
I 'm onepixel
I 'm function a
var foo = {
value: 1
}
function bar(){
console.log(this.value);
}
bar.call(foo);
>>>
var foo = {
value: 1,
bar: function(){
console.log(this.value)
}
}
bar.call(foo); >>>>>>>>> foo.bar(); // 1
实现call:
// 步骤分为：1.将函数设为对象的属性；2.执行该函数；3.删除该函数；
Function.prototype.call2 = function(context){
var context = context || window;
context.fn = this;
var args = [];
// 第二个参数开始才是参数 第一个参数是对象
for(var i = 1, len= arguments.length; i< len;i++){
args.push('arguments[' + i + ']');
}
var result = eval('context.fn(' + args + ')');
delete context.fn;
return result;
}
剖析apply的内部原理
apply和call的唯一区别是第二个参数的传递方式不同，apply的第二个参数必须是一个数组(或者类数组)，而call允许传递一个参数列表。
详见上面call的剖析
Function.prototype.apply2 = function(context, arr){
var context = Object(context) || window;
context.fn = this;
var result;
if(!arr){
result = context.fn();
}else{
var args = [];
for(var i = 0, len = arr.length; i < len ; i++){
args.push('arr[' + i+ ']');
}
result = eval('context.fn(' + args + ')')
}
delete context.fn;
return result;
}
剖析bind的内部原理
思路
弥补了call/apply的不足，由于call/apply会对目标函数自动执行，从而导致他无法在事件绑定函数中使用，因为事件绑定函数不需要我们手动执行，它是在事件被触发时由js内部自动执行的。而bind在实现改变函数this的同时又不会自动执行目标函数，因此可以完美的解决上述问题。
换一句话而言：bind()方法会创建一个新函数。当这个新函数被调用时，bind()的第一个参数将作为他运行时的this，之后的一序列参数将会在传递的实参前传入作为它的参数。
特点：1.返回一个函数; 2.可以传入参数
需要说明的是：
1.在bind的时候 ，还可以传参，在执行bind返回的函数时，再传另一个参数
2.一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的this值被忽略，同时调用时的参数被提供给模拟函数。
实现
Function.prototype.bind2 = function(context){
if(typeof this !== 'function'){
throw new Error('Funtion.prototype.bind - what is trying to be bound is not callable');
}
vat fToBind = this;
var args = Array.prototype.slice.call(arguments, 1);
var fNOP = function(){};
var fBound = function(){
fToBind.apply(this instanceof fNOP ? this : context, args.concat(Array.prototype.slice.call(arguments)));
}
fNOP.prototype = this.prototype;
fBound.prototype = new fNOP();
return fbound;
}
