this相关总结

this绑定规则

四个绑定规则

1、默认绑定

        在非严格模式下，this会绑定到全局对象（在浏览器中是window）。在严格模式下，this会绑定到undefined。

function foo() {
  console.log(this.a);
}


foo(); // 默认绑定

2、隐式绑定

        当函数被一个对象的属性引用并调用时，this会绑定到那个对象。

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2,
  foo: foo
};

obj.foo(); // 2

3、显式绑定

        使用call、apply或bind方法可以显式地将this绑定到一个对象。

function foo() {
  console.log(this.a);
}

var obj = {
  a: 2
};

foo.call(obj); // 2

4、new绑定

        当一个函数被new关键字调用时，一个新对象会被创建并绑定到this。

优先级

        new>显式(bind)>隐式>默认

箭头函数的this

箭头函数本身没有this，他的this需要找运行时最近一层作用域的this。

看下面的例子。

var name = 'window'
function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()() //window
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) // person2

person1.obj.foo2()() //obj ,记住看运行时的，这个obj对象并没有形成作用域。
person1.obj.foo2.call(person2)() // person2，在箭头函数之前已经把this改为person2了
person1.obj.foo2().call(person2) //obj

new操作符做了什么

new操作符主要做了以下操作：

1、创建新对象并将构造函数的显式原型设为这个对象的隐式原型。

2、调用构造函数将this绑定为前面的新对象。

3、判断结果类型，返回结果对象。

function myNew(Constructor, ...args) {
  // 创建一个新对象，并将其原型设置为构造函数的原型
  const obj = Object.create(Constructor.prototype);
  
  // 调用构造函数，将this绑定到新对象
  const result = Constructor.apply(obj, args);
  
  // 如果构造函数返回了一个对象，则返回这个对象；否则，返回新创建的对象
  return typeof result === 'object' && result !== null ? result : obj;
}

手写call、apply、bind

将执行的函数添加到绑定的this对象上，然后通过隐式绑定调用，从而模拟显式绑定。

call

		// call
			Function.prototype.myCall = function(thisArg, ...args) {
				// 1 转换需要绑定的this	
				thisArg = thisArg == null ? window : Object(thisArg) //将thisArg转为对象类型，防止传入的是非对象类。

				// 2通过this拿到需要执行的方法，挂到thisArg下，然后隐式绑定类型的调用
				thisArg.fn = this
				const result = thisArg.fn(...args) //关键一行
				delete thisArg.fn
				return result
			}

			function foo(a) {
				console.log('2222', a);
			}
			foo.myCall({}, 111)

apply

        	Function.prototype.myApply = function(thisArg, args = []) {
				// 1 转换需要绑定的this	
				thisArg = thisArg == null ? window : Object(thisArg) //将thisArg转为对象类型，防止传入的是非对象类。

				// 2通过this拿到需要执行的方法，挂到thisArg下，然后隐式绑定类型的调用
				thisArg.fn = this
				const result = thisArg.fn(...args) //关键一行
				delete thisArg.fn
				return result //返回函数调用的结果
			}

			function foo(a) {
				console.log('2222', a);
			}
			foo.myApply({}, [111])

bind

        	// bind就是返回一个函数，函数内部进行隐式绑定调用。
			Function.prototype.myBind = function(thisArg, ...args1) {

				thisArg = thisArg == null ? window : thisArg
				const fn = this //需要在这里拿到函数
				return function(...args2) {
					thisArg.fn = fn
					const result = thisArg.fn(...args1, ...args2)
					delete thisArg.fn
					return result
				}
			}

			function foo(a, b) {
				console.log('2222', a, b);
			}
			const bar = foo.myBind({}, 11)//还需要支持两次调用时传递参数
			bar(22)

END