javascript —— this
2019-08-14 10:25:55来源:博客园 阅读 ()
目录
-
为什么要讨论this
-
this是什么
-
如何改变this的指向
-
箭头函数中的this
为什么要讨论this
代码一:
function fun1(){ var aa = 'I am aa'; console.log(this.aa) } fun1();
会打印出什么呢?是 ' I am aa ' 吗,
结果是:
undefined
原因:
此时 this 指向 window 对象,
this.aa 等同于 window.aa ,
aa 是局部变量,该值只在函数内部有效,
window.aa 访问的是全局属性,访问不到函数内部的值,因此会打印 undefined。
代码二:
var fun2 = function(){ console.log(this.name); } var name = 'I am x - global'; var obj2 = { name: 'I am x - local', ff: fun2 } fun2(); obj2.ff();
结果是:
I am x - global
I am x - local
fun2() 等同于 window.fun2() ,直接调用函数,此时所处 this 指向 window,
obj2.ff() 通过 obj2 对象访问其方法,这时 this 指向 obj2。
代码三:
var fun2 = function(){ console.log(this.name); } var name = 'I am x - global'; var obj2 = { name: 'I am x - local', ff: fun2, ff2: function(){ function fun3(){ console.log(this.name) } fun3(); } } fun2(); // global obj2.ff(); // local obj2.ff2(); //
结果:
I am x - global I am x - local I am x - global
就如下面定义所说的,
this 指向包含它的函数作为方法被调用时所属的对象。
此时 fun3 为函数,并非为绑定到对象上的方法。
this是什么
定义:this是指包含它的函数作为方法被调用时所属的对象。
个人理解:被调用时所处的上下文。
如何改变this的指向
- call()
- apply()
代码四:
var name = "global name"; var obj1 = { name: 'obj1' } var obj2 = { name: 'obj2' } function myName(){ console.log(this.name); } myName() myName.call(obj1) myName.call(obj2)
结果:
global name
obj1
obj2
call 改变了 this 的指向
call 和 apply 的区别
接受参数方式不同
Object.call(obj, arg1, arg2, arg3)
Object.apply(obj, [arg1, arg2, arg3])
箭头函数中的this
箭头函数中,修复了 this 的指向,
当箭头函数的函数声明存在于对象方法时,
此时 this 的指向不再是 window 或 undefined ,
而是这个对象本身。
看一段代码就明白了:
代码五:
var name = 'I am x - global'; var obj2 = { name: 'I am x - local', ff2: function(){ var fun3 = function(){ console.log(this.name) } var fun4 = () => { console.log(this.name) } fun3(); fun4(); } } obj2.ff2();
结果:
I am x - global
I am x - local
箭头函数中的 call()
直接来看一段代码吧
代码六:
var name = 'I am x - global'; var obj2 = { name: 'I am x - local', ff2: function(){ var fun3 = function(){ console.log(this.name) } var fun4 = () => { console.log(this.name) } fun3(); // global fun4(); // local fun3.call({name:'new name1'}) // 看这里 fun4.call({name:'new name2'}) // 看这里 } } obj2.ff2();
结果:
I am x - global I am x - local new name1 I am x - local
用 call() 或 apply() 调用箭头函数时,
将无法对 this 进行绑定,
传入的第一个参数将会被忽略。
原文链接:https://www.cnblogs.com/mu159/p/11290073.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:js截取字符串相关的知识点
- javascript面向对象入门基础详细介绍 2020-03-29
- JavaScript函数表达式详解及实例 2020-03-25
- 如何用javascript连接access数据库 2020-03-20
- js中去掉字串左右空格 2020-03-20
- Javascript中的经典技巧 2020-03-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash