javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > js的this作用域

js中的this作用域全解析

作者:bye_cherry

这篇文章主要介绍了js中的this作用域全解析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

this作用域问题

一般来说,谁调指谁是一个基本原则,但是js和其他面向对象语言稍微有些区别,虽然从某种程度上,这有助于帮我们判断this指向问题,但是并不能涵盖所有的情况,建议从函数调用的5种方式展开

函数式调用

var age = 10
var person = {
  age:12,
  say(){
    function f(){
      console.log(this.age)
    }
    f()
  }
}
person.say()// 10

以此模式调用函数时,this被绑定到全局对象。这是语言设计上的一个错误。倘若语言设计正确,那么当内部函数被调用时,this应该仍然绑定到外部函数的this变量。这个设计错误的后果就是方法不能利用内部函数来帮助它工作,因为内部函数的this被绑定了错误的值(全局对象),所以不能共享该方法对对象的访问权。

这种情况是不遵从所谓谁调指谁原则的

解决方法,内部函数外使用一个变量保存this

var age = 10
var person = {
  age:12,
  say(){
    var that = this
    function f(){
      console.log(that.age)
    }
    f()
  }
}
person.say()// 12

方法调用模式

当一个函数被保存为对象的一个属性时,我们称它为一个方法。当一个对象的方法被调用时,this被绑定到调用方法的对象。

var age = 10
var person = {
  age:12,
  say(){
    console.log(this.age)
  }
}
person.say()// 12

这就有点像所谓的谁调指谁

在数组中的特例

var arr=[
  function(){
    console.log(this)
  },
  1,
  2,
]
arr[0]()
//输出结果
[f, 1, 2]

很显然,数组其实也是对象,虽然这种调用方式在写法上可能更加贴近函数调用模式,但是从打印结果来看,这很显然属于方法调用模式有点类似于arr.0()

反过来想,方法调用模式也可以写成

person['say']()

构造器调用模式

如果在一个函数前面带上 new 关键字来调用,那么背地里将会创建一个连接到该函数的prototype成员的新对象,同时this会被绑定到那个新对象上。

function foo(){
  console.log('this is' + this)
}
new foo()
// this is [object]

new 前缀也会改变return 语句的行为,如果return 的值是对象,那么将会将这个对象返回,否则将返回默认创建的新对象。

function foo(){
  console.log('this is ' + this.a)
  const obj = {
    a:1
  }
  return obj
}
const f1 = new foo()
console.log(f1.a) 
// this is undefied
// 1

新知识点,买一送一

这里可以看到,虽然返回的实例中确实有属性a,但是在代码执行上仍然存在先后顺序

call、apply、bind

没什么好讲的,更改作用域

特殊情况——箭头函数

箭头函数作为函数式调用设计失误的解决方案而提出(例a如下)

var age = 10
var person = {
  age:12,
  say(){
    var f=()=>{
      console.log(this.age)
    }
    f()
  }
}
person.say()// 12

箭头函数的特点中有一点是函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

所以call、apply、bind对箭头函数是不起作用的

var age = 10
var person = {
  age:12,
  say(){
    var f=()=>{
      console.log(this.age)
    }
    f.call({age:9})
  }
}
person.say()// 12

再看下面的例子

var age = 10
var person = {
  age:12,
  say:()=>{
    console.log(this.age)
  }
}
person.say()// 10

这是因为对象不构成单独的作用域,导致say箭头函数定义时的作用域就是全局作用域。阮一峰的es6教程中也有相关内容。

最后一个例子

var age = 10
var person = {
  age:12,
  say:()=>{
    console.log(this.age)
  }
}
var person1 = {
  age:13,
  say(){
    var f=person.say
    f()
  }
}
person1.say()// 10

这个例子看起来和例a很像,内层函数f是一个箭头函数,虽然是person的一个属性,那么结果是不是13呢,然而并不是,还是紧扣箭头函数特征:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。

该例中,person.say定义时在person内,对象不构成单独作用域,所以person.say定义时的作用域是全局作用域,所以f被调用时打印的结果为全局变量age=10

综合例题

var length = 10;
function fn(){
  console.log(this.length)
}
var obj = {
  length: 5,
  method: function(fn){
    fn()
    arguments[0]()
  }
}
obj.method(fn, 1)
// 输出结果
// 10
// 2
// 如果注释掉第一行代码 输出结果
// 0
// 2

(1)首先如果不注释第一行代码,obj调用自己的method方法,传了两个参数,第一个是在全局定义的函数fn,第二个参数是number类型的常量

进入method,立即调用fn,因为fn是一个函数式调用,所以this指向全局,也就是window,打印结果是10

再看接下来执行的arguments[0](),arguments是一个数组,表示函数的实参列表,也就是说这个数组中包含两个元素,第一个是传进去的fn,第二个是传进去的常量1,然后它调用了第0个元素表示的函数,所以这里是方法调用模式中的特例,作为数组元素被调用,this指向数组本身,我们经常会忽略数组中其实默认是有length属性的,即使在写for循环的时候经常会用,数组长度为2,所以打印结果是2

(2)如果注释了第一行代码,不在全局定义length属性,正常分析,length未定义,返回undefined,那么答案就错了,事实上,全局window是有length属性的,默认值为0

这就是这道题隐藏最深的点了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文