javascript 如何理解this
2022/8/7 14:25:10
本文主要是介绍javascript 如何理解this,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、如何理解this
在定义对象时,如果方法中使用了本对象的属性,需要加上this
告诉js调用的是那个对象的属性
// 当一个函数作为对象的方法被调用时,默认this的值等于那个对象。在方法中引用this而不是直接引用一个对象 function sayNameForAll(){ console.log(this.name);//this代表调用该函数的对象 } var person1={ name:"KFC", sayName:sayNameForAll//sayNameForAll函数作为sayName的属性值赋给sayName }; var person2={ name:"Greg", sayName:sayNameForAll }; var name="mike";//全局变量,是全局对象的属性,直接调用sayNameForAll时输出这个名字 person1.sayName(); person2.sayName(); sayNameForAll();
结果:
最后一行直接使用,this默认为全局对象,name是定义的全局属性,因此,调用sayNameForAll()输出的是全局对象的属性name,this指向全局变量
二、如何修改this
2.1 call(指定的this值,给调用call方法的函数传递的参数1)
//改变this(操作和使用this)
function sayNameForAll1(lable){
console.log(lable+":"+this.name);
}
var p1={
name:"syx"
};
var p2={
name:"yyqx"
};
var name="mike";
// call第一个参数:指定this的值,其后所有的参数都是需要被传入sayNameForAll1的参数 sayNameForAll1.call(this,"global");//this.name="mike" this===全局对象 sayNameForAll1.call(p1,"top1");//this===p1 sayNameForAll1.call(p2,"top2");//this===p2
结果:
2.2 apply(指定this的值,[给调用apply方法的函数传递的参数数组或参数对象])
function sayNameForAll1(lable){
console.log(lable+":"+this.name);
}
var p1={
name:"syx"
};
var p2={
name:"yyqx"
};
var name="mike";
//apply方法:第一个参数 指定this的值,第二个参数:数组[内含需要被传入函数的参数] sayNameForAll1.apply(this,["global"]); sayNameForAll1.apply(p1,["p1"]); sayNameForAll1.apply(p2,["p2"]);
结果:
2.3 bind(this,传递给函数的命名参数)
function sayNameForAll1(lable){
console.log(lable+":"+this.name);
}
var p1={
name:"syx"
};
var p2={
name:"yyqx"
};
var name="mike";
//bind()方法:第一个参数this的值,其他所有参数:需要被永久设置在新函数中的命名参数
var sayP1Name=sayNameForAll1.bind(p1);//this绑定p1
sayP1Name("我最喜欢的idol");//我最喜欢的idol:syx 传入label的值
var sayP2Name=sayNameForAll1.bind(p2,"我第二喜欢的idol");
sayP2Name();//我第二喜欢的idol:yyqx
p2.sayName=sayP1Name;
p2.sayName("p2");//p2:syx
结果:
这篇关于javascript 如何理解this的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-28一步到位:购买适合 SEO 的域名全攻略
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign学习入门:轻松掌握微服务通信
- 2024-12-27OpenFeign学习入门:轻松掌握微服务间的HTTP请求
- 2024-12-27JDK17新特性学习入门:简洁教程带你轻松上手
- 2024-12-27JMeter传递token学习入门教程
- 2024-12-27JMeter压测学习入门指南
- 2024-12-27JWT单点登录学习入门指南
- 2024-12-27JWT单点登录原理学习入门