首页 >> js开发 >> js代码JavaScript this关键字指向常用情况解析
js代码JavaScript this关键字指向常用情况解析
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
在之前写代码的经历中,常常试过写着写着this就莫名其妙的不知道指向到哪里去了。今天看了曾探的javascript设计模式,里面特别谈到了this在不同情况下指代的对象,非常有意思。this指代的情况
this指代的情况
this有以下4种情况:1、对象.函数的形式调用:object.function();2、普通函数的形式调用:function();3、构造器调用;4、Function.prototype.call或Function.prototype.apply调用;1、对象.函数的形式调用
1、对象.函数的形式调用
对象.函数方式调用时,指代该对象。
var obj = {
num:1,
getNum:function(){
alert(this.num);//输出1
}
}
obj.getNum();
var obj = {
num:1,
getNum:function(){
alert(this.num);//输出1
}
}
obj.getNum();2、普通函数形式调用
2、普通函数形式调用
普通函数的方式被调用时,this指向全局对象。
window.num = 2;
var obj = {
num:1,
getNum:function(){
alert(this.num);
}
}
obj.getNum();//弹出1
var fun1 = obj.getNum;
fun1();
//弹出2
window.num = 2;
var obj = {
num:1,
getNum:function(){
alert(this.num);
}
}
obj.getNum();//弹出1
var fun1 = obj.getNum;
fun1();
//弹出2太神奇了,直接调用函数 fun(); 与通过对象调用函数 xxx.fun(); this指代的对象不同。3、构造器调用
3、构造器调用为了能够用上new关键字,javascript的创建对象可以这样定义。
var person = function(){
this.name = '刘备';
}
var person = function(){
this.name = '刘备';
}
在这种情况下,this指代这个正在创建中的对象。
var p = new person();
alert(p.name);//弹出刘备
var p = new person();
alert(p.name);//弹出刘备
4、Function.prototype.call或Function.prototype.apply调用4、Function.prototype.call或Function.prototype.apply调用
var obj1 = {
name:'关羽',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'刘备'
}
alert(obj1.getName());
//关羽
alert(obj1.getName.call(obj2));
//刘备
var obj1 = {
name:'关羽',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'刘备'
}
alert(obj1.getName());
//关羽
alert(obj1.getName.call(obj2));
//刘备以上就是本文的全部内容,希望对大家的学习有所帮助。
this指代的情况
this有以下4种情况:1、对象.函数的形式调用:object.function();2、普通函数的形式调用:function();3、构造器调用;4、Function.prototype.call或Function.prototype.apply调用;1、对象.函数的形式调用
1、对象.函数的形式调用
对象.函数方式调用时,指代该对象。
var obj = {
num:1,
getNum:function(){
alert(this.num);//输出1
}
}
obj.getNum();
var obj = {
num:1,
getNum:function(){
alert(this.num);//输出1
}
}
obj.getNum();2、普通函数形式调用
2、普通函数形式调用
普通函数的方式被调用时,this指向全局对象。
window.num = 2;
var obj = {
num:1,
getNum:function(){
alert(this.num);
}
}
obj.getNum();//弹出1
var fun1 = obj.getNum;
fun1();
//弹出2
window.num = 2;
var obj = {
num:1,
getNum:function(){
alert(this.num);
}
}
obj.getNum();//弹出1
var fun1 = obj.getNum;
fun1();
//弹出2太神奇了,直接调用函数 fun(); 与通过对象调用函数 xxx.fun(); this指代的对象不同。3、构造器调用
3、构造器调用为了能够用上new关键字,javascript的创建对象可以这样定义。
var person = function(){
this.name = '刘备';
}
var person = function(){
this.name = '刘备';
}
在这种情况下,this指代这个正在创建中的对象。
var p = new person();
alert(p.name);//弹出刘备
var p = new person();
alert(p.name);//弹出刘备
4、Function.prototype.call或Function.prototype.apply调用4、Function.prototype.call或Function.prototype.apply调用
var obj1 = {
name:'关羽',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'刘备'
}
alert(obj1.getName());
//关羽
alert(obj1.getName.call(obj2));
//刘备
var obj1 = {
name:'关羽',
getName:function(){
return this.name;
}
}
var obj2 = {
name:'刘备'
}
alert(obj1.getName());
//关羽
alert(obj1.getName.call(obj2));
//刘备以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章:
- jsEcharts在Taro微信小程序开发中的踩坑记录js大全
- jsvue实现动态给id赋值,点击事件获取当前点击的元素的id操作js大全
- jsaxios解决高并发的方法:axios.all()与axios.spread()的操作js大全
- jsWebpack的Loader和Plugin的区别js大全
- js解决vue watch数据的方法被调用了两次的问题js大全
- js详解nginx配置vue h5 history去除#号js大全
- JavaScriptnodejs中内置模块fs,path常见的用法说明
- JavaScriptNode.js path模块,获取文件后缀名操作
- js解决Vue watch里调用方法的坑js大全
- js解决vue init webpack 下载依赖卡住不动的问题js大全