- 1.作为对象方法调用
- 2.作为普通函数调用
- 1.作为普通函数进行调用
- 2.将函数赋值给一个对象
- 3.callback内部的this指向了window
- 4.解决callback内部的this问题
- 3.构造器调用
- 1.普通构造器
- 2.如果构造器显示地返回了一个object类型对象
- 4.Function.prototype.call 或 Fucktion.prototype.apply调用
- 1.跟普通的函数调用相比，可以动态的传入函数的this
1.作为对象方法调用
var obj = {
a:1,
getA:function(){
console.log(this===obj);
console.log(this.a);
}
}
obj.getA();
2.作为普通函数调用
//作为普通函数进行调用
var name = ‘SmarTom‘;
var getName = function(){
return this.name;
}
console.log(getName());//返回undefined
/*-------------------------------------------------------*/
//将函数赋值
var obj ={
name : ‘SmarTom‘,
getName : function(){
return this.name;
}
}
/*将函数赋值给一个对象 相当于
var getname=function(){
asdfasdf
}
*/
var getname = obj.getName;
console.log(getname()); //返回undefined
/*===============请忽视分割线=============================*/
var obj ={
name : ‘SmarTom‘,
getName : function(){
return this.name;
}
}
console.log(obj.getName()); //返回SmarTom
/*===============我知道你不会当做不知道====================*/
有时候我们会遇到一个困扰，比如在div节点事件函数内部，有一个局部的callback方法，callback方法被作为普通函数来调用时，callback内部的this指向了window,但我们往往认为他是指向该div的节点，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">我是一个div</div>
<script>
document.getElementById(‘div1‘).onclick = function(){
alert(this.id); //作为对象调用div1
var callback =function(){
alert(this.id);
}
callback(); //调用的是全局的this 弹出 undefined
}
</script>
</body>
</html>
解决方法:
1.将this赋值给临时变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">我是一个div</div>
<script>
document.getElementById(‘div1‘).onclick = function(){
var that = this;
alert(that.id); //作为对象调用div1
var callback =function(){
alert(that.id);
}
callback(); //调用的是全局的this 弹出 undefined
}
</script>
</body>
</html>
2.使用严格模式 "use strict" 注意使用的时候会忽略this=undefined 的情况
3.构造器调用
JavaScript中没有类，但是可以从构造器中创建对象，同时也提供了new运算符，使得构造器更像一个类。其实就是用new构造一个对象，看起来更像是类
通常情况下，构造器里的this就指向返回的这个对象
var myClass = function(){
this.name = ‘SmarTom‘;
}
var obj = new myClass();
console.log(obj.name); //返回SmarTom
但使用new调用构造器时，还要注意一个问题，如果构造器显示地返回了一个object类型对象，那么此次运算结果最终会返回这个对象，可不是我们之前期待的this;
var myClass = function(){
this.name = ‘SmarTom‘;
return {
name : "Bob Dylan"
}
}
var obj = new myClass();
console.log(obj.name); //返回Bob Dylan
4.Function.prototype.call 和 Function.prototype.apply调用
跟普通的函数调用相比，可以动态的传入函数的this
var obj1 = {
name : "SmarTom",
getName : function(){
return this.name;
}
};
var obj2 = {
name :"Bob Dylan"
};
console.log(obj1.getName()); //输出‘SmarTom‘
console.log(obj1.getName.call(obj2)); //输出BobDylan
时间： 2024-10-13 10:46:54