javascript this 关键字

JavaScript this关键字有一下几种使用情况:
1.全局执行
2.在函数中执行
3.作为对象的方法调用
4.作为一个构造函数调用
5.箭头函数
6.apply、call和bind

#全局执行#

在浏览器中输出Window对象

console.log(this); 
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

在node中输出global

console.log(this);
// global

#在函数中执行#

在普通函数中执行,this指向Window

function foo () {
  console.log(this)
}
foo();
// Window

在“严格模式”中 ('use strict'),this并不会指向Window,而是undefined,目的是消除javascropt中一些不严谨的行为

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

#作为对象的方法调用#

一个函数作为一个对象的方法调用时,this指向该对象

var obj = {
  name: 'zane',
  foo: function () {
    console.log(this);
  }
}
obj.foo();
// Object {name: "zane"}

但是如果把一个变量的方法重新赋值给一个变量,然后直接调用这个变量,this指向Window,因为此时和obj已经没有关系了,和调用一个普通的函数一样

var obj = {
  name: 'zane',
  foo: function () {
    console.log(this);
  }
}

var foo2 = obj.foo;
foo2();
// Window

#作为构造调用#

通过new调用构造函数时,this指向构造函数实例化出来的对象,当通过普通方式调用构造函数时(不通过new关键字)this指向Window,和调用普通函数相同

function Person(name) {
    this.name = name;
    console.log(this);
}
Person.prototype.say = function () {
    console.log('Person can say.');
}
var p1 = new Person('someone1');
// Person {name: "someone1"}
var p2 = Person(); 
// Window

#箭头函数#

箭头函数与普通函数的区别就是this的指向不能更改,this的指向在函数定义时已经确定,其他的与普通函数相同

#apply、call、bind#

他们可以更改函数中的 this 指向

apply:它会立即执行函数,第一个参数是指定执行函数中 this 的上下文,第二个参数是一个数组,是传给执行函数的参数(与 call 的区别)
call:它会立即执行函数,第一个参数是指定执行函数中 this 的上下文,后面的参数是执行函数需要传入的参数;
*bind:它不会执行函数,而是返回一个新的函数,这个新的函数被指定了 this 的上下文,后面的参数是执行函数需要传入的参数;

var obj3 = {
    name: 'someone3'
}
function foo3 (name) {
    this.name = name;
    console.log(this)
}
foo3.call(obj3, 'someone4');       // Object {name: "someone4"}
foo3.apply(obj3, ['someone4']);  // Object {name: "someone4"}
var foo4 = foo3.bind(obj3);
var p4 = new foo4('someone4'); // foo3 {name: "someone4"}

你可能感兴趣的:(javascript this 关键字)