深入理解js函数的作用域与this指向

128 阅读 0 评论 85 点赞

我是靠谱客的博主落寞指甲油，最近开发中收集的这篇文章主要介绍深入理解js函数的作用域与this指向，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

函数的作用域与this指向是js中很重要的一部分，理清这点东西需要个逻辑，看看我的逻辑怎么样...

下面是个提纲，可以直接挑你感兴趣的条目阅读。

• 函数的定义方式：直接定义（window下，内部定义），对象的方法，对象原型的方法；

• 函数的调用方式：直接调用，call/apply，with

• 对于直接定义的函数和对象的方法，作用域默认状态下是它的定义处的作用域链。

• 对于直接定义的函数，this指向window。

• 对于对象的方法，this指向实例化对象（对应于实例化对象默认返回this的情况）。

• 用call/apply改变方法的this指向

• 在函数或方法的定义时可以通过with改变其作用域链。

下面分开来具体说说：

函数的定义，如提纲中提到的可以分为两种：直接定义（window下，内部定义），对象的方法（或对象原型的方法）。从下面的示例代码中可以看到函数fn1与fn2以及对象的方法doFunction在函数使用name时name的值来自相应的域。

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += name;

在使用name的值时将“name”用“this.name”来代替会出现什么情况呢，看下例：

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

从结果来看可以验证提纲中的第4和5条，也可以看到this和作用域是两套分离的链，遵循个自的变量查询逻辑，具体的查询逻辑在下面的性能分析中会提到，如果是新手建议先看一下“js的作用域链”方面的基础知识。

关于函数的调用方法，我用下面的方示例说明提纲中的第2、6条：

var name = 'window下的name<br/>';
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = 'MyObj下的name<br/>';
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

调用时call和apply的使用是为了改变被调用函数的this指向。with的使用是为了改变被调用函数中变量的查询域。我们把上例中的call和name前的this去掉再加上with来演示with的作用。

var name = 'window下的name<br/>';
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = 'MyObj下的name<br/>';

看到with的使用并不方便，需要在被调用函数中添加with，有人可能想能不能向下面那样调用来整体改变变量作用域而不去改变被调用函数呢？

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

很遗憾，不可以！所以在一些成熟的框架中随处可见call和apply的使用，却很少用到with，在用JSHint检测js语法的时候with处都标了小红点，在一些js编码指导中也建议尽量少用with，因为with改变了变量的默认查询链，所以会给后期的维护人员一些困惑，还有性能方面的一些考虑，请慎用with。

以上这篇深入理解js函数的作用域与this指向就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。