原文链接 – http://www.jianshu.com/p/d647aa6d1ae6
起首，了解下实行高低文的生命周期。
在实行高低文的竖立阶段，会分别天生变量对象，竖立作用域链，以及肯定this指向。
个中this的指向，是在函数被挪用的时刻肯定的。也就是实行高低文被竖立时肯定的。
所以，同一个函数由于挪用体式格局的差别，this指向了不一样的对象。
var a = 10;
var obj = {
a: 20
}
function fn () {
console.log(this.a);
}
fn(); // 10
fn.call(obj); // 20另一个要注意的处所是，在函数实行过程当中，this一旦被肯定，就不可更改了。
var a = 10;
var obj = {
a: 20
}
function fn () {
this = obj; // 这句话试图修正this，运转后会报错
console.log(this.a);
}
fn();一、全局对象中的this
关于全局对象的this，是一个比较特别的存在。全局环境中的this，指向window本身。因而，这也相对简朴，没有那末多庞杂的状况须要斟酌。
// 经由过程this绑定到全局对象
this.a2 = 20;
// 经由过程声明绑定到变量对象，但在全局环境中，变量对象就是它本身
var a1 = 10;
// 仅仅只要赋值操纵，标识符会隐式绑定到全局对象
a3 = 30;
// 输出结果会悉数相符预期
console.log(a1, a2, a3);
console.log(window.a1, window.a2, window.a3);二、函数中的this
在总结函数中this指向之前，我想我们有必要经由过程一些新鲜的例子，来感受一下函数中this的捉摸不定。
// demo01
var a = 20;
function fn() {
console.log(this.a);
}
fn();// demo02
var a = 20;
function fn() {
function foo() {
console.log(this.a);
}
foo();
}
fn();// demo03
var a = 20;
var obj = {
a: 10,
c: this.a + 20,
fn: function () {
return this.a;
}
}
console.log(obj.c);
console.log(obj.fn());在一个函数高低文中，this由挪用者供应，由挪用函数的体式格局来决议。
假如挪用者函数，被某一个对象所具有，那末该函数在挪用时，内部的this指向该对象。
在严厉情势下，假如函数自力挪用，那末该函数内部的this，则指向undefined。
在非严厉情势下，当this指向undefined时，它会被自动指向全局对象。
从结论中我们可以看出，想要准确肯定this指向，找到函数的挪用者以及辨别他是不是是自力挪用就变得非常症结。
// 为了可以准确推断，我们在这里运用严厉情势，由于非严厉情势会自动指向全局
'use strict';
function fn() {
console.log(this);
}
fn(); // fn是挪用者，自力挪用，undefined
window.fn(); // fn是挪用者，被window所具有，window然则须要特别注意的是，在上面的demo03中，对象obj中的c属性运用this.a + 20来盘算，而他的挪用者obj.c并不是是一个函数。因而不适用于上面的划定规矩，我们要对这类体式格局零丁下一个结论。
当obj在全局声明时，不管obj.c在什么处所挪用，这里的this都指向全局对象。
当obj在函数环境中声明时，这个this指向undefined，在非严厉情势下，会自动转向全局对象**
'use strict';
var a = 20;
function foo () {
var a = 1;
var obj = {
a: 10,
c: this.a + 20,
fn: function () {
return this.a;
}
}
return obj.c;
}
console.log(foo()); // error现实开辟中，并不引荐如许运用this
再来看一些轻易邃晓毛病的例子，加深一下对挪用者与是不是自力运转的邃晓。
var a = 20;
var foo = {
a: 10,
getA: function () {
return this.a;
}
}
console.log(foo.getA()); // 10
var test = foo.getA;
console.log(test()); // 20foo.getA()中，getA是挪用者，他不是自力挪用，被对象foo所具有，因而它的this指向了foo。而test()作为挪用者，只管他与foo.getA的援用雷同，然则它是自力挪用的，因而this指向undefined，在非严厉情势，自动转向全局window。
轻微修正一下代码，请自行邃晓。
var a = 20;
function getA() {
return this.a;
}
var foo = {
a: 10,
getA: getA
}
console.log(foo.getA()); // 10function foo() {
console.log(this.a)
}
function active(fn) {
fn(); // 实在挪用者，为自力挪用
}
var a = 20;
var obj = {
a: 10,
getA: foo
}
active(obj.getA);三、运用call，apply显现指定this
JavaScript内部供应了一种机制，让我们可以自行手动设置this的指向，也就是call与apply。
一切的函数都具有这两个要领。它们除了参数略有差别，其功用完整一样。它们的第一个参数都为this将要指向的对象。
以下例所示。fn并不是属于对象obj的要领，然则经由过程call，我们将fn内部的this绑定为obj，因而就可以运用this.a接见obj的a属性了。这就是call/apply的用法。
function fn() {
console.log(this.a);
}
var obj = {
a: 20
}
fn.call(obj);而call与apply背面的参数，都是向将要实行的函数通报参数。个中call以一个一个的情势通报，apply以数组的情势通报。这是他们唯一的差别。
function fn(num1, num2) {
console.log(this.a + num1 + num2);
}
var obj = {
a: 20
}
fn.call(obj, 100, 10); // 130
fn.apply(obj, [20, 10]); // 50由于call / apply的存在，这让JavaScript变得非常天真。因而就让call / apply具有了许多有用途的场景。简朴总结几点，也迎接人人补充。
1.将类数组对象转换为数组
function exam(a, b, c, d, e) {
console.log(arguments); // { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 }
var arg = [].slice.call(arguments);
console.log(arg); // [ 2, 8, 9, 10, 3 ]
}
exam(2, 8, 9, 10, 3);
// 也经常运用该要领将DOM中的nodelist转换为数组
// [].slice.call( document.getElementsByTagName('li') );2.依据本身的须要天真修正this指向
var foo = {
name: 'joker',
showName: function() {
console.log(this.name);
}
}
var bar = {
name: 'rose'
}
foo.showName.call(bar) // rose3.完成继续
// 定义父级的组织函数
var Person = function(name, age) {
this.name = name;
this.age = age;
this.gender = ['man', 'woman'];
}
// 定义子类的组织函数
var Student = function(name, age, high) {
Person.call(this, name, age);
this.high = high;
}
Student.prototype.message = function() {
console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';');
}
new Student('xiaoming', 12, '150cm').message(); // { name:xiaom, age:12, high:150cm, gender:man }在Student的组织函数中，借助call要领，将父级的组织函数实行了一次，相当于将Person中的代码，在Sudent中复制了一份，个中的this指向为从Student中new出来的实例对象。call要领保证了this的指向准确，因而就相当于完成了下层。Student的组织函数等同于下。
var Student = function(name, age, high) {
this.name = name;
this.age = age;
this.gender = ['man', 'woman'];
// Person.call(this, name, age); 这一句话，相当于上面三句话，因而完成了继续
this.high = high;
}4、在向其他实行高低文的通报中，确保this的指向坚持稳定
以下面的例子中，我们期待的是getA被obj挪用时，this指向obj，然则由于匿名函数的存在致使了this指向的丧失，在这个匿名函数中this指向了全局，因而我们须要想一些方法找回准确的this指向。
var obj = {
a: 20,
getA: function() {
setTimeout(function() {
console.log(this.a)
}, 1000)
}
}
obj.getA(); // undefined通例的解决方法很简朴，就是运用一个变量，将this的援用保存起来。我们经常会用到这要领，然则我们也要借助上面讲到过的学问，来推断this是不是在通报中被修正了，假如没有被修正，就没有必要如许运用了。
var obj = {
a: 20,
getA: function() {
var self = this;
setTimeout(function() {
console.log(self.a)
}, 1000)
}
}别的就是借助闭包与apply要领，封装一个bind要领。
function bind(fn, obj) {
return function() {
return fn.apply(obj, arguments);
}
}
var obj = {
a: 20,
getA: function() {
setTimeout(bind(function() {
console.log(this.a)
}, this), 1000)
}
}
obj.getA(); // 20固然，也可以运用ES5中已自带的bind要领。它与上面封装的bind要领是一样的结果。
var obj = {
a: 20,
getA: function() {
setTimeout(function() {
console.log(this.a)
}.bind(this), 1000)
}
}四、组织函数与原型要领上的this
在封装对象的时刻，我们险些都邑用到this，然则，只要少数人搞邃晓了在这个过程当中的this指向，就算我们邃晓了原型，也不一定邃晓了this。所以这一部份，将会为这篇文章最主要最中心的部份。邃晓了这里，将会对你进修JS面向对象发生庞大的协助。
连系下面的例子人人思索一下。
function Person(name, age) {
// 这里的this指向了谁?
this.name = name;
this.age = age;
}
Person.prototype.getName = function() {
// 这里的this又指向了谁？
return this.name;
}
// 上面的2个this，是同一个吗，他们是不是指向了原型对象？
var p1 = new Person('Nick', 20);
p1.getName();我们已晓得，this是在函数挪用过程当中肯定，因而，搞邃晓new的过程当中究竟发生了什么就变得非常主要。
经由过程new操纵符挪用组织函数，会阅历以下4个阶段。
竖立一个新的对象；
将组织函数的this指向这个新对象；
指向组织函数的代码，为这个对象增加属性，要领等；
返回新对象。
因而，当挪用new操纵符组织函数时，this实在指向的是这个新竖立的对象，末了又将新的对象返回出来，被实例对象p1吸收。因而，我们可以说，这个时刻，组织函数的this，指向了新的实例对象，p1。
而原型要领上的this就好邃晓多了，依据上边对函数中this的定义，p1.getName()中的getName为挪用者，他被p1所具有，因而getName中的this，也是指向了p1。
