5分钟理解JavaScript中this用法分享_javascript技巧
程序员文章站
2022-06-02 17:54:08
...
前言
关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络。本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助。
正文
1. this用法实例
window.color = “red”;
var o = { color: “blue” };
function sayColor(){
alert(this.color);
}
sayColor(); //”red”
o.sayColor = sayColor;
o.sayColor(); //”blue”
2. this用法简易理解
this指向哪里:
this运行的环境(the context object),或者简单理解为:this所在函数被调用时的当前作用域。
一段实例代码立刻明白:
var fun = function() {
console.log(this);
}
fun();// console: window,fun 的执行context为window,即this所在函数(fun())被调用时的当前作用域为window。
new fun();//console: fun,fun 的执行context为fun对象内,即this所在函数(fun())被调用时的当前作用域为fun对象内。
3. this用法的一个特殊情况
(1)情况:
点击这个button之后,你会发现按钮的value值没有改变。
原因:在本代码运行的情况下this指向的是window对象。
点击这个button之后,程序可正常执行。
(2)原因解释:
得到的输出是:
function demo() {
this.value = Math.random();
}
得到的输出是:
function onclick() {
demo();
}
关于JavaScript中this的用法网络中已经有较多比较详尽的介绍,可以参考本文的参考学习资料和网络。本文结合网络收集整理,尝试以一种简易的方式阐述JavaScript中this的用法,希望对大家关于JavaScript中this用法的快速理解有所帮助。
正文
1. this用法实例
复制代码 代码如下:
window.color = “red”;
var o = { color: “blue” };
function sayColor(){
alert(this.color);
}
sayColor(); //”red”
o.sayColor = sayColor;
o.sayColor(); //”blue”
2. this用法简易理解
this指向哪里:
this运行的环境(the context object),或者简单理解为:this所在函数被调用时的当前作用域。
一段实例代码立刻明白:
复制代码 代码如下:
var fun = function() {
console.log(this);
}
fun();// console: window,fun 的执行context为window,即this所在函数(fun())被调用时的当前作用域为window。
new fun();//console: fun,fun 的执行context为fun对象内,即this所在函数(fun())被调用时的当前作用域为fun对象内。
3. this用法的一个特殊情况
(1)情况:
复制代码 代码如下:
点击这个button之后,你会发现按钮的value值没有改变。
原因:在本代码运行的情况下this指向的是window对象。
复制代码 代码如下:
点击这个button之后,程序可正常执行。
(2)原因解释:
复制代码 代码如下:
得到的输出是:
复制代码 代码如下:
function demo() {
this.value = Math.random();
}
复制代码 代码如下:
得到的输出是:
复制代码 代码如下:
function onclick() {
demo();
}
上一篇: php变量作用域的深入解析
下一篇: mysql安装出现问题汇总_MySQL
推荐阅读
-
javascript中闭包概念与用法深入理解
-
JavaScript中的return布尔值的用法和原理解析
-
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
-
工作中遇到的HTML和CSS布局和JavaScript技巧记录分享
-
JavaScript中异步/等待的用法和理解
-
JavaScript开发中14个有用的Jquery技巧分享
-
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容_javascript技巧
-
JavaScript中关于console.log调试的技巧分享
-
理解JavaScript中的对象 推荐_javascript技巧
-
javascript中clipboardData对象用法详解_javascript技巧