this从入门到精通

this

按照惯例，先看一段代码

看一段代码

var name = "222";
var a = {
  name: "111",
  say: function () {
    console.log(this.name);
  },
};
var fun = a.say;
fun();
a.say();

var b = {
  name: "333",
  say: function (fn) {
    fun();
  },
};

b.say(a.say);
b.say = a.say;
b.say();

// 题目来源于网络 并非自创

你能一眼看出输出答案吗？如果可以那么我相信 this 概念你已经理解的很透彻了，如果你不懂输出内容，请接着向下看，相信你会有所收获

什么是 this

MDN 上是这样说的：在绝大多数情况下，函数的调用方式决定了 this 的值

ECMAScript 规范中这样写：his 关键字执行为当前执行环境的 ThisBinding。

按照自己的理解翻译一下：在 JavaScript 中，this 的指向是调用时决定的，而不是创建时决定的，这就会导致 this 的指向会让人迷惑，简单来说，this 具有运行期绑定的特性。

调用位置

首先需要理解调用位置，调用位置就是函数在代码中被调用的位置，而不是声明的位置

function baz() {
  console.log("baz");
  bar();
}
function bar() {
  console.log("bar");
  foo();
}
function foo() {
  console.log("foo");
}
baz();

• 对于 foo()：调用位置是在 bar()中。
• 对于 bar()：调用位置是在 baz()中。
• 而对于 baz()：调用位置是全局作用域中。

可以看出，调用位置应该是当前正在执行的函数的前一个调用中

事件绑定

不论是 DOM0 还是 DOM2 事件绑定，给元素 e 的某个事件行为绑定方法，当前事件触发方法执行，方法种的 this 是当前元素 e 本身

特殊情况:

• IE6-8 基于 attachEvent 实现 DOM2 事件绑定，事件触发方法执行，方法中的 this 不是元素本身，大部分情况是 window
• 如果使用 call/apply/bind 强制改变 this 指向，我们以改变的为主

全局上下文 this

很好理解，全局上下文的 this 实际上就是 window

console.log(window === this); // true
var a = 1;
this.b = 2;
window.c = 3;
console.log(a + b + c); // 6

函数上下文 this

• 普通函数
  普通函数执行，看函数前面是否有点。有点 ，点前面是谁 this 就是谁，没有点 this 就是 window (严格模式是 undefined)

  fn() -> this： window/undefined
  obj.fn() -> this:obj
  xxx.proto.fn() -> this:xxx.proto

  自执行函数：this 一般是 window/undefined
  回调函数中的 this 一般也是 window/undefined

在函数内部，this 的值取决于函数被调用的方式。

直接调用

this 指向全局变量，如果当前函数处于全局变量种

function foo() {
  return this;
}
console.log(foo() === window); // true

call()、apply()

this 指向绑定的对象

var person = {
  name: "axuebin",
  age: 25,
};
function say(job) {
  console.log(this.name + ":" + this.age + " " + job);
}
say.call(person, "FE"); // axuebin:25
say.apply(person, ["FE"]); // axuebin:25

可以看到，定义了一个 say 函数是用来输出 name、age 和 job，其中本身没有 name 和 age 属性，我们将这个函数绑定到 person 这个对象上，输出了本属于 person 的属性，说明此时 this 是指向对象 person 的。

bind()

this 将永久地被绑定到了 bind 的第一个参数。

作为对象的一个方法

this 指向调用函数的对象

var person = {
  name: "axuebin",
  getName: function () {
    return this.name;
  },
};
console.log(person.getName()); // axuebin

这里有一个需要注意的地方。。。

var name = "xb";
var person = {
  name: "axuebin",
  getName: function () {
    return this.name;
  },
};
var getName = person.getName;
// getName 在全局环境中，此时this指向window 所以输出 xb
console.log(getName()); // xb

发现 this 又指向全局变量了，这是为什么呢？

还是那句话，this 的指向得看函数调用时。

作为构造函数

通过构造函数创建一个对象其实执行这样几个步骤：

• 创建新对象
• 将 this 指向这个对象
• 给对象赋值（属性、方法）
• 返回 this
• 所以 this 就是指向创建的这个对象上。

function Person(name) {
  this.name = name;
  this.age = 25;
  this.say = function () {
    console.log(this.name + ":" + this.age);
  };
}
var person = new Person("axuebin");
console.log(person.name); // axuebin

箭头函数

所有的箭头函数都没有 this,都是指向外层的当前函数所在的上下文的 this

题解分析

看过上面的几种 this 场景，对于开始的题目是不是豁然开朗了呢，来分析一下

var name = "222";
var a = {
  name: "111",
  say: function () {
    console.log(this.name);
  },
};
var fun = a.say;
fun(); // 此时fun处于全局环境中，也就是全局环境调用这个方法，谁调用this指向谁，所以打印 222
// fun() === fun.call(window)  fun相当于是语法糖
a.say(); // 此时函数处于a对象中，所以 this指向 a对象 所以打印 111
// a.say() === a.say.call(a)
var b = {
  name: "333",
  say: function (fn) {
    fn(); // 此时fn执行没有其他的this 绑定，
    // fn() === fn.call(window)
    // a.say() === fn() === fn.call(window) === a.say.call(window)
  },
};

b.say(a.say); // 打印 222
b.say = a.say;
// b.say = a.say 相当于
// var b = {
//     name: '333',
//     say:function(){
//         console.log(this.name)
//     }
// }
b.say(); // 打印 333

ps: 有些内容来源网络，忘记

最后结果： 222 111 222 333
看到这里，你明白 this 了吗，不明白做点题目吧

this 相关面试题

第一题

let obj = {
    fn:(function(){
        return function(){
            console.log(this)
        }
    })()
}
obj.fn();
let fn = obj.fn;
fn();

第二题

var fullName = 'language';
var obj = {
    fullName: 'javascript',
    prop: {
        getFullName: function () {
            return this.fullName;
        }
    }
};
console.log(obj.prop.getFullName());
var test = obj.prop.getFullName;
console.log(test());

第三题

var name = 'window'; 
var Tom = {
    name: "Tom",
    show: function () {
        console.log(this.name);
    },
    wait: function () {
        var fun = this.show;
        fun();
    }
};
Tom.wait(); 

第四题

window.val = 1
var json = {
    val: 10,
    dbl: function () {
        this.val *= 2;
    }
}
json.dbl();
var dbl = json.dbl;
dbl();
json.dbl.call(window);
alert(window.val + json.val);

第五题

(function () {
    var val = 1; 
    var json = {
        val: 10,
        dbl: function () {
            val *= 2; 
        }
    };
    json.dbl();
    alert(json.val + val); 
})();

答案

// 第一题
obj.fn(); // this指向的是obj ,所以输出 {fn：function(){}}
let fn = obj.fn;
fn();// 此时的fn 属于全局，相当于把函数赋值给全局变量，所以 this 是window

// 第二题
console.log(obj.prop.getFullName());
//=>this:obj.prop  =>obj.prop.fullName  =>undefined
var test = obj.prop.getFullName;
console.log(test());
//=>this:window =>window.fullName =>'language' */


// 第三题
var Tom = {
    name: "Tom",
    show: function () {
        // this->window
        console.log(this.name); //=>'window'
    },
    wait: function () {
        // this->Tom
        var fun = this.show;
        fun();
        // 此时fn执行没有其他的this 绑定，
       // fn() === fn.call(window)
    }
};

// 第四题
json.dbl();
//->this:json  ->json.val=json.val*2  ->json.val=20
var dbl = json.dbl;
dbl();
//->this:window ->window.val=window.val*2 ->window.val=2
json.dbl.call(window);
//->this:window ->window.val=window.val*2 ->window.val=4
alert(window.val + json.val); //=>"24"

// 第五题
(function () {
    var val = 1; //->2
    var json = {
        val: 10,
        dbl: function () {
            // this->json
            val *= 2; //val=val*2  此处的val是变量  json.val是对象的属性
        }
    };
    json.dbl();
    alert(json.val + val); //=>"12"
})();