一、this
- this的定义：随着函数使用场合的不同，this的值也会发生变化。但是有一个总的原则，那就是this指的是——调用函数的那个对象（执行它的那个对象）。
-
作为函数调用时：
在函数被直接调用时，this绑定到全局对象。在浏览器中，window就是该全局对象
console.log(this);
function fn() {
console.log(this);
}
fn();
全局下的this 和 函数内部的this 是同一个this
相关概念——默认函数在调用时都是全局对象在调用，使用node时全局对象是globle对象；在浏览器环境上时是window对象
-
内部函数——闭包：
函数嵌套产生的内部函数的this，不是其父函数在调用它，仍是全局变量在调用
function fn() {
function fnfn(){
console.log(this);
}
fnfn();
}
fn();
闭包内的this指向
function fn() {
var a = 123;
function fnfn(){
console.log(this);
}
fnfn();
}
fn();
image.png
相关概念——始终是一个环境window在执行所有的函数，并不是父函数在调用子函数。子函数可以访问父函数的环境（局部变量），但是他们的执行都是统一由全局对象在执行
function fn() {
var a = 123;
function fnfn(){
console.log(a);
}
fnfn();
}
fn();
image.png
相关概念——函数的堆栈：函数执行外部函数先进后出(函数进出内存顺序)
入栈顺序：从下到上。最外层执行先进入内存，最内层执行后进入内存
出栈顺序：从上到下。最内层执行先退出内存，最外层执行后退出内存
function fn() {
var a = 123;
function fnInner(){
console.trace(this); //18
}
fnInner(); //20
}
fn(); //22
入栈顺序：从下到上。出栈顺序：从上到下
-
Dom对象绑定事件
在事件处理程序中this代表事件源的Dom对象
document.addEventListener('click', function(){
console.log(this); //16 事件绑定的this指向触发它的Dom对象
setTimeout(function(){
console.log(this); //18 计时器的队列由全局在维护
}, 200);
}, false);
相关概念：保存事件绑定的this的方法
document.addEventListener('click', function(){
console.log(this); //16 事件绑定的this指向触发它的Dom对象
var _document = $(this);
setTimeout(function(){
console.log(_document); //此时打印出的是时间绑定的this
}, 200);
}, false);
-
setTimeout、setInterval
这两个方法执行的函数this也是全局对象
document.addEventListener('click', function(){
console.log(this); //16 事件绑定的this指向触发它的Dom对象
setTimeout(function(){
console.log(this); //18 计时器的队列由全局在维护
}, 200);
}, false);
image.png
-
注意：作为对象方法调用
在JavaScript中，函数也是对象，因此函数可以作为一个对象的属性，此时函数被称为该对象的方法。在使用这种调用方式时，this被自然绑定到该对象（this指向调用它的对象）
是哪个对象在调用它，this就代表谁
var obj1 = {
name: 'Byron',
fn: function(){
console.log(this); //obj1
}
};
obj1.fn();
image.png
obj1.fn = obj1[fn] = function(){} = console.log(this)
当把obj1.fn赋值给变量fn2时，调用fn2。此时fn2是在全局环境window下执行的fn2，所以this指向了window
var obj1 = {
name: 'Byron',
fn: function(){
this.age = 123;
console.log(this);
}
};
obj1.fn(); //obj1 this指向调用它的对象obj1
console.log(obj1.age); //123 this指向ojb1，所以this.age=obj1.age=123
var fn2 = obj1.fn;
fn2(); //Window
image.png
可以理解为
var obj1 = {
name: 'Byron',
fn: function(){
this.age = 123;
console.log(this);
}
};
obj1.fn(); //obj1 this指向调用它的对象obj1
console.log(obj1.age); //123 this指向ojb1，所以this.age=obj1.age=123
var fn2 = obj1.fn;
//等价于
var fn2 = function(){
this.age = 123;
console.log(this);
}
fn2();
-
作为构造函数调用
所谓构造函数，就是通过这个函数生成一个新对象（object）。
这时this就指向这个新对象
this就是新创建的那个实例
image.png
new运算符接受一个函数F及其参数：new F(arguments...)。这一过程分为三步：
1.创建类的实例。这步是把一个空的对象的 _proto_ 原型属性设置为F.prototype
（创建一个空对象此处将空对象命名为p1对象，把p1对象的_proto_设置为Person函数的prototype属性）
2.初始化实例。函数F被传入参数并调用，关键字this设定为该实例
3.返回实例。
示例：
function Person(name){
this.name = name;
}
Person.prototype.printName = function(){
console.log(this.name);
}
//此处为步骤2
var p1 = new Person('Byron');
var p2 = new Person('Casper');
var p3 = new Person('Vincent');
//步骤3
p1.printName();
p2.printName();
p3.printName();
image.png
注：当在var p1 = new Person('Byron');构造函数里找不到调用的方法时，此时会去父元素找原型属性中定义的方法，this就是新创建的那个实例
function Person(name){
this.name = name;
}
Person.prototype.printName = function(){
console.log(this);
}
var p1 = new Person('Byron'); //this指向此处对象p1
p1.printName();
image.png
-
Function.propotype.bind
bind，返回一个新函数，并且使函数内部的this为传入的第一个参数
控制this变为指定值
var obj1 = {
name: 'Byron',
fn: function(){
this.age = 123;
console.log(this);
}
};
obj1.fn(); //obj1
var fn2 = obj1.fn;
fn2(); //window
var fn3 = obj1.fn.bind(obj1); //创建了fn3函数
fn3(); //obj1
var fn3 =obj1.fn.bind({name:Seaser'});
fn3(); //name:'Seaser'
image.png
-
使用call和apply设置this
call apply，调用一个函数，传入函数执行上下文及参数
直接调用指定执行环境，与bind区别在于不需创建新函数
fn.call(context, param1, param2...)
fn.apply(context, param1, param2...)
语法很简单，第一个参数都是希望设置的this对象，不同之处在于call方法接受参数列表，而apply接受参数数组
var obj1 = {
name: 'Byron',
fn: function(){
this.age = 123;
console.log(this);
}
};
obj1.fn(); //obj1
var fn2 = obj1.fn;
fn2();
fn2.call(obj1);
image.png
var obj1 = {
name: 'Byron',
fn: function(name, age){
this.name = name;
this.age = 123;
console.log(this);
}
};
var fn3 = obj1.fn.bind(obj1);
fn3('Casper', 21);
var fn2 = obj1.fn;
fn2.call(obj1, 'Casper', 21); //指定fn2的执行环境是obj1
fn2.apply(obj1, ['Casper', 21]);
image.png
二、arguments
-
arguments
代表实参的列表，只有在执行过程中arguments才有值，执行完成后变为null
1.在调用函数时，会自动在该函数内部生成一个名为arguments的隐藏对象
2.该对象类似于数组，可以使用[]运算符获取函数调用时传递的实参
3.只有函数调用时，arguments对象才会被创建，未调用时值为null
function fn(name, age){
console.log(arguments);
name = 'XXX';
console.log(arguments);
arguments[1] = 30;
console.log(arguments);
}
fn('Byron', 20);
image.png
不知道一个方法有几个参数时使用return arguments
function join(){
var s = '';
for(var i=0; i<arguments.length; i++){
s += ',' + arguments[i];
}
return s.substr(1);
}
console.log(join(1,2,3,4));
image.png
在arguments环境应用数组的join方法（用apply把执行环境变为arguments）
function join(){
return Array.prototype.join.apply(arguments);
}
console.log(join(1,2,3));
image.png
三、caller
-
caller
在函数A调用函数B时，被调用函数B会自动生成一个caller对象，指向调用它的函数对象。如果函数当前未被调用，或并非被其他函数调用，则caller为null
function fn(){
console.log(fn.caller); //null 没有函数在调用它，在执行本函数
function fc(){
console.log(fc.caller);
/*function fn(){} 返回外层函数，外层函数在调用它
（外层函数将它推入堆栈），在全局环境下执行*/
}
fc();
}
fn();
image.png
四、callee
当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用
由于arguments在函数被调用时才会生效，因此arguments.callee在函数未调用时是不存在的（即null.callee），且引用它会产生异常
function fn(){
console.log(fn.callee);
}
fn();
image.png
匿名函数时特别好用
var i = 0;
window.onclick = function(){
console.log(i);
if(i < 5){
i++;
//利用arguments.callee找到匿名函数function(){}
setTimeout(arguments.callee, 200);
}
}
image.png
五、三种变量
- 实例变量：（this）类的实例才能访问到的变量
- 静态变量：（属性）直接类型对象能访问到的变量
- 私有变量：（局部变量）当前作用域内有效的变量
function ClassA() {
var a = 1; //私有变量，只有函数内部可以访问
this.b = 2; //实例变量，只有实例可以访问
}
ClassA.c = 3; // 静态变量，也就是属性，类型访问
console.log(a); // error
console.log(ClassA.b) // undefined
console.log(ClassA.c) //3
var classa = new ClassA(); //只有创建实例才能 访问ClassA内的变量b
console.log(classa.a);//undefined
console.log(classa.b);// 2
console.log(classa.c);//undefined
六、函数的执行环境
JavaScript中的函数既可以被当作普通函数执行，也可以作为对象的方法执行，这是导致 this 含义如此丰富的主要原因
一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数
接下来创建作用域链，然后初始化变量。首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。
如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解JavaScript中的变量作用域非常重要，最后为this变量赋值，会根据函数调用方式的不同，赋给this全局对象，当前对象等
至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取
