轻松理解JS中的 this

this的8种使用场景

 

// 1. Basic this
function foo() {
  return this;
}
foo();

// 2.
(function(){
  return this;
})()

(function(){
  'use strict';
  return this;
})()

// 3. Object this
var a = {
  name: 'suqing',
  getContext: function(){
    return this;  
  }
}
a.getContext()

// 4. Constructor this
function Friend(area, favLan){
  this.area = area;
  this.favLan = favLan;
  this.context = this;
}
var frnd1 = new Friend( 'client', 'js');
frnd1.context;

// 5. Get this from the chain
var dad = {
  fatherName: 'Dad'
}
var child = Object.create(dad);
child.whoIsYourDad = function(){
  return this.fatherName;
}
child.whoIsYourDad();

// 6. bind, call, apply
function getMenu(){
  return this;
}
var devMenu = { menu: 'pizza' };
var forDev = getMenu.bind(devMenu);
forDev();
var forTester = getMenu.call(devMenu);
forTester ();
var forLeader = getMenu.apply(devMenu);
forLeader ();


// 7. setTimeout

// 8. DOM

 

下面代码为Chrome Console输出

this

this

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

window

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

this === window

true

var myVar = 'my Day';

undefined

myVar

"my Day"

this.myVar

"my Day"

window.myVar

"my Day"

var a = {}

undefined

a.name = 'suqing'

"suqing"

var a = { name: 'suqing', context: this }

undefined

a.context

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

a.context === window

true

function foo(){ // something }

undefined

foo()

undefined

foo.trueExpertise = 'beginner';

"beginner"

foo.trueExpertise

"beginner"

foo.this

undefined

function whatIsThis(){ return this; }

undefined

whatIsThis()

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

(function(){ return this; })()

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

(function(){ 'use strict'; return this; })()

undefined

(function(self){ 'use strict'; return this; })(this)

undefined

(function(self){ 'use strict'; return self; })(this)

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

对象的this

var a = { name: 'suqing', getContext: function(){ return this; } }

undefined

a.getContext()

 

Object {name: "suqing", getContext: function}

var d = { name: 'yefeng' }

undefined

d.getContext = a.getContext

function (){ return this; }

d.getContext()

 

Object {name: "yefeng", getContext: function}

var foo = a.getContext

undefined

foo

function (){ return this; }

foo()

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

a.getContext()

 

Object {name: "suqing", getContext: function}

d.getContext()

 

Object {name: "yefeng", getContext: function}

foo()

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

var foo = a.getContext

undefined

foo()

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

构造器

function Friend() { this.area = area; this.favLan = favLan; this.context = this; }

undefined

function Friend(area, favLan) { this.area = area; this.favLan = favLan; this.context = this; }

undefined

var frnd1 = new Friend('client','js')

undefined

frnd1.context

 

Friend {area: "client", favLan: "js", context: Friend}

var frnd2 = new Friend('server','java')

undefined

frnd2.context

 

Friend {area: "server", favLan: "java", context: Friend}

Friend('server', 'java')

undefined

prototype链

var dad = { fatherName: 'Dad' }

undefined

var child = Object.create(dad)

undefined

child.fatherName

"Dad"

child.whoIsYourDad = function(){ return this.fatherName; }

function (){ return this.fatherName; }

child.whoIsYourDad()

"Dad"

 参数this

function getMenu(){ return this; }

undefined

var devMenu = { menu: 'pizza' }

undefined

var forDev = getMenu.bind(devMenu)

undefined

forDev()

Object {menu: "pizza"}

var hrMenu = { menu: 'salad' }

undefined

var forHR = getMenu.bind(hrMenu)

undefined

forHR()

Object {menu: "salad"}

getMenu.call

function call() { [native code] }

getMenu.apply

function apply() { [native code] }

getMenu.apply(hrMenu)

Object {menu: "salad"}

getMenu.call(hrMenu)

Object {menu: "salad"}

setTimeout

var a = { getContext: function(){ setTimeout( function(){ console.log(this); }, 10) } }

undefined

a.getContext()

undefined

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

VM4713:5

var a = { getContext: function(){ setTimeout( function(){ console.log(this); }, 4000) } }

undefined

a.getContext()

undefined

 

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}

VM4733:5

DOM event handler

document.getElementById('s_rp_words').addEventListener('click', function(){ console.log(this); })

undefined

1. <span id=​"s_rp_words" class=​"s-rp-words">​…​</span>​

参考视频：http://www.youtube.com/watch?v=yuo8YqKDQ-M