this
- function中的this，如果function独立执行或者立即执行时，function里的this指向window。(严格模式下，独立运行function，this会指向undefined)
- 箭头函数中的this，和箭头函数定义时所处的外部环境有关，和是否独立执行没有关系。
- class内部默认采用的是严格模式，所以class里的非箭头函数的方法，独立运行时指向undefined。
- 使用call function里的this指向目标对象。使用构造函数或class，this指向实例对象。
class Test {
a(){console.log(this)}
}
let t = new Test()
a = t.a;
a() // undefined
class Test {
a = () => {console.log(this)}
}
let t = new Test()
a = t.a;
a() // 实例t
const obj = {a:1}
function test () {
return () => {
console.log(this);
}
}
test.call(obj)() // {a:1}
function test() { console.log(this) }
test(); // window
(function () {
"use strict"
console.log(this)
})(); // undefined
- function 作为对象的一个属性时，通过对象调用函数，函数的this指向对象。
function Test(){
console.log(this); // print window 严格模式下为undefined
var a = { x:1 };
a.x = function(){
console.log(this); // print a
}
a.x(); // 如果是 a.b.c.x() this指向为c 因为真正的调用者就是c
}
Test();
- function 作为构造函数时，function里的this指向实例化对象。
function Test(){
this.x = 1;
console.log(this); // print { x: 1 }
}
new Test();
- function.call(obj)，function里的this指向obj。无参指向window。
function Test(){
console.log(this);
}
var a = {
x: 2
};
Test(); // print window object
new Test(); // print {} Test的实例化对象
Test.call(a); // print {x: 2} 对象a
- 函数作为参数，this指向取决于内部的执行方式
var name = 2;
var obj = { name: 1 }
function test (fn) {
fn.call(obj); // 1
new fn(); // undefined
fn(); // 2
}
test( function () { console.log(this.name) } );
that this
- 通常使用that = this 是为了缓存this，因为在编写代码的过程中，this可以会被别的函数的this进行覆盖。
$(‘#conten').click(function(){
//this是被点击的#conten
var that = this;
$(‘.conten').each(function(){
//this是.conten循环中当前的对象
//that仍然是刚才被点击的#conten
});
});
字面量对象
- this：字面量中的this直接指向字面量本身
- 字面量对象相当于一个实例化对象
- 针对实例化对象属性的增删改查
- 增 obj.newName = value;
- 删 delete obj.oldName;
- 改 obj.oldName = value;
- 查 obj.oldName;
构造函数 constructed function
- 定义：构造函数通常将普通函数的函数名首字母大写。通过new Function()实例化出一个对象。相当于class中的constructor。
- this：构造函数内部通过this来指向构造函数的实例化对象。
- 编写一个构造函数较为恰当的方式，参数使用对象，调用时参数更加明确。
function Person(opt){
this.name = opt.name || '匿名';
this.age = opt.age || 18;
this.print = function(){
console.log(this.name + this.age);
}
}
var person = new Person({
name: 'skyler',
age: 30
});
console.log(person);
constructed function this原理
- 构造函数new Function() 期间，AO 存储 this--obj obj存储this.attribute
function Test(){
this.name = 'skyler';
}
var t = new Test();
new Test()时形成AO
first AO中存储this: {}
then 执行this.name = 'skyler'后形成：
AO = {
this: {
name: 'skyler'
}
}
finally return AO.this;
- 构造函数中显示的return 原始值会阻断程序运行，但函数最终还是return this; return引用值，会直接返回该引用值。
class 待看完class课程后确认该理解
- 和构造函数的区别在于可以在class内部直接定义方法，不需要通过this定义。
- 理论上在class的constructor中可以完成所有的事情，但通过class中定义method，更便于维护？？？
- 再来理解下面的话：
class在es6是一个模块，构造器和构造函数本质上是不同的，构造函数在实例化以后也有构造器。只是构造器是类在实例化以后的自动执行的函数，在es5中是直接实例化构造函数，而es6是实例化类。es5的构造函数仅仅是模拟面相对象中的类，而真正的面相对象应该用类来表现，类，你可以理解为像被当成es5模块的立即执行函数，在es6中只是用类的形式表达一个模块。它也是独立的作用域。可以被导入导出。理解面向对象最标准的方式应该是类，而不是es5的构造函数实例化模拟面相对象。
