this
函数上下文中的this
<script>
// 如果要把this的值从一个环境传到另一个，就要用call或apply。
// 对象可以作为bind或apply的第一个参数传递，并且该参数将绑定到this
var obj = {a: 'Custom'};
// 声明一个变量，并将该变量作为全局对象window的属性
var a = 'Global';
function whatThis() {
return this.a; // this的值取决于函数被调用的方式
}
// 'Global' 因为这个函数中this没有被设定，所以它默认是全局window对象。
whatThis();
// ’Custom' 因为函数中this被设置为obj
whatThis.call(obj);
// ’Custom' 因为函数中this被设置为obj
whatThis.apply(obj);
</script>
this和对象转换
<script>
function add(c, d) {
return this.a + this.b + c + d;
}
var o = {a: 1, b: 3};
// 第一个参数是用作"this"的对象，其余参数用作函数的参数（其中一个参数是数组，则数组成员用作函数参数）
add.call(o, 6, 8); // 18
add.apply(o, [10, 20]); // 34
</script>
<script>
/*
在非严格模式下使用call和apply时，如果用作this的值不是对象，则会被尝试转换为对象。
null和undefined被转换为全局对象。原始值如”7“或”foo“会使用相应构造函数转换为对象。
因此”7“会被转换为new Number(7)生成的对象，字符串“foo”会转换为new String('foo')生成的对象。
*/
function bar() {
console.log(Object.prototype.toString.call(this));
}
bar.call(7); //[Object Number]
bar.call('foo'); // [Object String]
bar.call(undefined); // [Object Window]
</script>
bind方法
<script>
/*
Function.prototype.bind()：调用f.bind(someObject)会创建一个与f具有相同函数体
和作用域的函数，但是在这个新函数中，this将永久地绑定到bind的第一个参数，无论这个函数
函数时如何被调用的。
*/
function f() {
return this.a;
}
var g = f.bind( {a: "azerty"} );
console.log(g()); // azerty 按照bind上述bind注释，g函数将和f一样拥有相同函数体和作用域，那this也将永远指向对象：{a: "azerty"}
var h = g.bind( {b: "yoo"} );
console.log(h()); // azerty 重新绑定新对象没用，只指向{a: "azerty"}
var o = {
a: 37,
f: f,
g: g,
h: h
};
debugger;
console.log(o.a); // 37
console.log(o.f()); // 37
console.log(o.g()); // azerty
console.log(o.h()); // azerty
</script>
箭头函数
<script>
/*
箭头函数中，this与封闭词法环境的this保持一致，在全局代码中，它将被设置为全局对象：
*/
debugger;
var globalObject = this;
var foo = (() => this); // function foo() {return this}
console.log(foo() === globalObject);
// 作为对象一个方法调用
var obj = {foo: foo};
console.log(obj.foo() === globalObject); //true
// 尝试使用call来设定this
console.log(foo.call(obj) === globalObject); // true
// 尝试使用bind来设定this
foo == foo.bind(obj);
console.log(foo() === globalObject ); // true
</script>
<script>
/*
创建一个含有bar方法的obj对象，
bar返回一个函数，
这个函数返回this,
这个返回的函数是以箭头函数创建的，
所以它的this被永久绑定到了它外层函数的this。
bar的值可以在调用中设置，这反过来又设置了返回函数的值
*/
var obj = {
bar: function() {
var x = (() => this);
return x;
}
};
debugger;
/*
作为obj对象的一个方法来调用bar，把它的this绑定到obj。
将返回的函数的引用赋值给fn
*/
var fn = obj.bar();
/*
* 直接调用fn而不设置this，
* 通常（即不使用箭头函数的情况）默认为全局对象
* 若在严格模式则为undefined
*/
console.log(fn() === obj); // true
/*
* 但是注意，如果你只是引用obj的方法，
* 而没有调用它
*/
var fn2 = obj.bar;
/*那么调用箭头函数后，this指向window，因为它从bar继承this*/
console.log(fn2()() == window); // true
</script>
作为构造函数
<script>
/*
当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。
虽然构造函数返回默认值是this所指的那个对象，但它仍可以手动设置返回其他对象
（如果返回值不是一个对象，则返回this对象）
*/
/*
构造函数这样工作：
functin MyCostructor(para) {
// 函数实体写在这里
// 根据需要在this上创建属性，然后赋值给它们，比如：
this.fum = "nom";
// 等等……
// 看到这里，对以前看过的内容有了新的理解，this.fum是在为对象增加属性值，
// 而哪个对象使用这个函数作为构造函数，则this指向哪个对象，fum也作为哪个对象的属性值。
this.ele = para; // this.para = para
// 字符串被赋值是要加上双引号的，若字符没有双引号作为值，那它就是变量。
// 故this.para = para可以看做this.para是对象有个名为para的属性（属性值不可变），
// 等号右侧的para是变量值，它可以是任何类型值，具体是要看构造时传入的是什么类型（字符串就是双引号）
// 啊……知识的海洋里又看到一点希望~~~
// 如果函数具有返回对象的return语句，则该对象将是new表达式的结果。
// 否则，表达式的结果是当前绑定到this的对象（即通常常见的情况~）
// 即this 将是指向被return的对象，而不是用构造函数创建的对象。
}
*/
// 通常常见的情况
function C() {
this.a = 36;
}
var o = new C();
console.log(o.a); // 36
// 构造函数返回值为对象
function C2() {
this.a = 36;
this.b = 545;
return { a: 32, c: 666 };
}
o = new C2();
console.log(o.a); // 32
console.log(o.b); // undefined
console.log(o.c); // 666
</script>
this范围
<script>
var name = '希望';
var age = 17;
var obj = {
name: '校长',
objAge: this.age, // 这里的this指向window
myFun: function() {
// 这里的this指向obj
console.log(this.name + " 年龄 " + this.age);
}
}
debugger;
obj.objAge; // 17
obj.myFun(); // 校长 年龄 undefined
</script>
