javascript|this相关问题 typescript|前端

一些理解绑定相关

bind函数，顾名思义，用于为调用函数绑定一个作用域，因为this很容易跟丢它原来所在的作用域，直接指向顶层的window对象。
其实call与apply和bind的作用类似，都是为了在会丢失this的情况下绑定他们。「之所以绑定就是为了解决这个问题」

绑定顺序
this一般有四种绑定模式

函数调用模式，又称之为默认模式。

a() // 这个时候this指向全局对象，也就是window

方法调用模式，又称之为隐式绑定。

obj.a() // 这个时候this指向obj这个对象

构造器调用模式，又称之为new模式。

指向new构造函数中的这个this，可以传值。

// Example function Lover(name) { this.name = name this.sayName = function () { console.log(this) // 指向调用构造函数生成的实例 console.log('我的女孩：', this.name) } } var name = '小白' var xiaoHong = new Lover('小红') xiaoHong.sayName() // 我的女孩：小红

apply,call,bind调用模式，又称之为显示绑定。

apply与call的区别在于，apply的第二个参数是数组，call方法后面其余参数是传入函数执行的参数，

也就是说，在使用 call() 方法时，传递给函数的参数必须逐个列举出来。

绑定顺序为

new > 显示绑定 > 隐式绑定 > 默认绑定。

一些题目

关于this

window.name = "window"; object = { name: 'object', run: function() { var inner = function() { alert("My name is" + this.name); } inner(); } }; object.run();

这个时候输出的应该是window
因为相当于直接在最外层环境调用了alert()

关于this

function a() { function b() { console.log(this) // window function c() { 'use strict' console.log(this) // undefined } c() } b() } a()

知识点

严格模式中

在全局作用域中，this指向window

'use strict' console.log(this === window) // true

在全局作用域中的函数中，this指向undefined。

'use strict' function foo() { console.log(this); } foo(); // undefined

这就可以解释为什么这道的c()为undefined

对象的方法中

通过对象调用方法，this指向当前对象

'use strict' let bar = { name: 'bar', getName: function(){ console.log(this); // {name: "bar", getName: ?} console.log(this.name); // bar } } bar.getName();

通过引用调用方法，this指向undefined。

其实和"在全局作用域中的函数中，this指向undefined"一摸一样。

'use strict' let bar = { name: 'bar', getName: function(){ console.log(this); // undefined console.log(this.name); // TypeError: Cannot read property 'name' of undefined } } let getName = bar.getName; getName();

构造函数中的this，指向实例对象。

// 严格模式无干扰 'use strict' function Con(name, age) { this.name = name; this.age = age; console.log(this); // Con {name: "con", age: 3} } let con = new Con('con', 3);

5. 事件处理函数中的this，this指向当前节点。

与严格模式无关

![截屏2022-08-20 下午1.57.35](/Users/fengcaizhi/Library/Application Support/typora-user-images/截屏2022-08-20 下午1.57.35.png)

const btn = document.querySelector('#bailan'); btn.addEventListener('click', function() { console.log(this); })

内联事件处理函数中，this指向分为两种形式。

其实这个和之前是大同小异的，在外面就是当前节点，在回调函数中自然就是undefined·

关键实现 call的实现
实现步骤

判断调用对象是否为函数
判断传入上下文对象是否存在，如果不存在，则设置为window
处理传入的参数，截取第一个参数后的所有参数
将函数作为上下文对象的一个属性
使用上下文对象来调用这个方法，并保存返回结果。
删除刚才新增的属性。
返回结果。

具体实现

Function.prototype.myCall = function(context) { // 判断调用对象是否为函数 if(typeof this === 'function') { console.error('type error'); } // 判断传入的参数，截取第一个参数后的所有参数。 const args = [...arguments].slice(1) // 判断传入的上下文对象是否存在，如果不存在，则设置为window context = context || window; // 将调用函数设为对象的方法 context.fn = this; // 调用函数 const result = context.fn(...args) // 将属性删除 delete context.fn; return result; }

apply的实现
实现步骤

判断调用对象是否为函数
判断传入上下文对象是否存在，如果不存在，则设置为window
将函数作为上下文对象的一个属性。
判断参数值是否传入
使用上下文对象来调用这个方法，并保存返回结果。
删除刚才新增的属性。
返回结果。

具体实现

Function.prototype.myApply = function(context) { if(typeof this === 'function') { throw new Error('出现错误') } context = context || window context.fn = this; if(arguments[1]) { result = context.fn(...arguments[1]) } else { result = context.fn() } delete context.fn return result }

bind的实现
实现步骤

判断调用对象是否为函数
保存当前函数的引用，获取其余传入参数值。
创建一个函数返回
函数内部使用 apply 来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的 this 给 apply 调用，其余情况都传入指定的上下文对象。

Function.prototype.myBind = function(context) { if(typeof this === 'function') { throw new Error('Error!'); } let args = [...arguments].slice(1),fn = this; return function Fn() { return fn.apply(this instanceof Fn ? this : context, args.concat(...arguments)) } }

具体实现
参考文章