this相关总结

2023-12-26 16:57:47

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

文章来源:https://blog.csdn.net/badbaby52906/article/details/135123242
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。