callee和caller属性以及this关键字的理解
最近一段时间写代码，也开始注意一些以前不想动脑理解的基础知识了。加油呀~~~
1. callee
- callee是实参对象arguments的一个属性（arguments.callee）；
- callee返回当前正在执行的函数；
- callee有利于做匿名函数的递归。
1.1 验证arguments.callee
function getCallee() {
return arguments.callee;
}
let callee = getCallee();
console.log(callee === getCallee); // true
1.2 利用arguments.callee实现递归完成阶乘函数
// 常用方法
function factorial1(num) {
return num > 1 ? num * factorial1(num - 1) : 1;
}
console.log("factorial1(5) = " + factorial1(5)); // 120
// 使用arguments.callee
function factorial2(num) {
return num > 1 ? num * arguments.callee(num - 1) : 1; // 120
}
console.log("factorial2(5) = " + factorial2(5));
2. caller
- caller是Function实例的一个属性；
- functionName.caller: functionName是当前正在执行的函数；
- caller返回一个对函数的引用，该函数调用了当前函数。如果该函数在顶层被调用则返回null。
2.1 使用caller的测试代码
function testCaller(msg) {
console.log(msg + testCaller.caller);
}
testCaller("顶层调用："); // 顶层调用：null
function callCaller() {
testCaller("callCaller调用：");
}
callCaller();
// ===打印结果===
/*callCaller调用：function callCaller() {
testCaller("callCaller调用：");
}*/
3. this
理解this代表什么真的很重要。以下内容仅涉及在前端开发中this的调用方式，喜欢动脑的你们可以试一试拿这些应用场景和之前接触的编程语言来做一个对比呀~
- this是Javascript语言的一个关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象（是执行环境，而非声明环境）。
3.1 标签属性注册事件调用
<button id="button1" type="button" name="button1" onclick="btnClick1()">button1</button>
<button id="button2" type="button" name="button2" onclick="btnClick2(this)">button2</button>
<script>
// 标签属性注册事件调用
function btnClick1() {
console.log(this);
}
function btnClick2(dom) {
console.log(this);
console.log(dom);
}
var eleButton1= document.getElementById("button1");
var eleButton2= document.getElementById("button2");
eleButton1.onmouseover = btnClick1; // dom
eleButton2.attachEvent("onmouseover", btnClick1); // window
eleButton2.addEventListener("mouseover", btnClick1, false); // dom
</script>
注：button1 点击的时候输出：window对象、button2 点击的时候输出：window对象 和 当前dom元素。用attachEvent、addEventListener方法要先进行判断哈，不要直接就写了。
- 通过标签属性注册事件调用，方法体中的this值指向window对象；
- js代码中给dom元素绑定事件属性，方法体中的this指向当前dom元素；
- IE低版本中利用attachEvent给dom元素注册事件，方法体中的this指向window对象；
- 利用addEventListener给dom元素注册事件，方法体中的this指向当前dom元素；
- 最后，如果你利用jquery绑定事件，回调函数中的this值是当前dom元素。
3.2 普通函数调用
function fun1() {
console.log("普通函数调用" + this);
}
fun1(); // 普通函数调用[object Window]
- 直接调用普通函数时，this是指向window对象的；
- 当没有明确的执行时的当前对象时，this指向全局对象window（非浏览器情况下（例如：nodejs）中全局变量并非window对象，而是叫“全局变量”（the global object）global）。
3.3 作为对象方法调用
var age = 10;
var tom = {
age: 20,
printAge: function () {
console.log(this.age);
}
};
tom.printAge(); // 20
- 函数作为某个对象的方法调用，这时this就指这个上级对象。
3.4 作为构造函数调用-new
var name = "window";
function People(name) {
this.name = name;
}
People.prototype.printName = function () {
console.log(this.name);
};
var people1 = new People("tom");
console.log(name); // window
console.log(people1.name); // tom
people1.printName(); // tom
- 所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。即new关键字后的构造函数中的this指向用该构造函数构造出来的新对象。
3.5 apply、call 调用
var color = "red";
var car = {
color: "blue",
printColor: function () {
console.log(this.color);
}
};
car.printColor(); // blue
car.printColor.call(); // red
car.printColor.call(this); // red
car.printColor.call(car); // blue
car.printColor.apply(); // red
car.printColor.apply(this); // red
car.printColor.apply(car); // blue
注：apply()、call()是函数对象的一个方法，作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。apply()、call()的参数为空时，默认调用全局对象。
3.6 eval函数
var age = 10;
var tom = {
age: 20,
printAge: function () {
eval("console.log(this.age)");
}
};
tom.printAge(); // 20
- eval函数执行的时候，this绑定到当前作用域的对象上。
3.7 setTimeout、setInterval和匿名函数
var city = "四川";
var bob = {
city: "北京",
printCity: function () {
var that = this; // 匿名函数中使用对象bob
(function () {
console.log("匿名函数：" + this.city); // 四川
console.log("匿名函数-that：" + that.city); // 北京
}());
setTimeout(function () {
console.log("setTimeout：" + this.city); // 四川
}, 2000);
setInterval(function () {
console.log("setInterval：" + this.city); // 四川
}, 5000)
}
};
bob.printCity();
- 在浏览器中setTimeout、setInterval和匿名函数执行时的当前对象是全局对象window（浏览器中全局变量可以当成是window对象下的变量）；
最后：this的应用场景有很多，在平时开发中一定要注意，避免入坑。
网友评论