this相关问题

一些理解

绑定相关

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

绑定顺序

this一般有四种绑定模式

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

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

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

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

1. 构造器调用模式，又称之为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()
// 我的女孩：小红

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

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

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

绑定顺序为

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

一些题目

1. 关于this

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

这个时候输出的应该是window

因为相当于直接在最外层环境调用了alert()

1. 关于this

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

• 知识点

严格模式中

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

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

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

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

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

对象的方法中

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

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

1. 通过引用调用方法，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指向当前节点。

• 与严格模式无关


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

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

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

关键实现

call的实现

实现步骤

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

具体实现

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的实现

实现步骤

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

具体实现

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的实现

实现步骤

1. 判断调用对象是否为函数
2. 保存当前函数的引用，获取其余传入参数值。
3. 创建一个函数返回
4. 函数内部使用 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))
  }
}

具体实现

参考文章

• 关于严格模式下的this指向问题
• 「2021」高频前端面试题汇总之JavaScript篇（下）