未加星标

javascript 跳跃式前进 (5) - 深入浅出 this[六种模式]

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏
问this为何物,直教人苦逼不已

this是面向对象编程中的一个概念,一般指向当前方法调用所在的对象,但在JS中灵活很多,为什么这么说呢?那是因为:

this是运行时绑定而非编写时绑定 this的绑定和函数声明的位置木有任何关系,执行上下文取决于函数调用时方式 this既不指向函数自身也不指向词法作用域。 So… 谁调用这个函数或方法,this关键字就指向谁这话是并不是完全准确的 this应当如何确定!

说到这个,就不得不说JS中this的绑定额;JS中有 五种 绑定模式及一种特殊绑定模式【ES6的箭头函数】;

默认绑定

默认绑定的this值取决于 严格模式 和 非严格模式 ;

var a = 10086; //在非严格模式中,单纯的函数调用的上下文年默认是指向window;所以this之下window function test1(){ console.log(this.a); } test1(); //结果集:10086 //而在严格模式中,this不指向window,只会绑定到undefined, function test2(){ "use strict" console.log(this.a); } test2();//抛出异常,值为undefined new绑定 //这个this绑定比较好理解,new 谁对象this指向new的对象 function test3(a){ this.a = a; console.log(this.a); //10086 console.log(a);//10086 } var testv3 = new test3(10086); //test3 {a: 10086} /* * new一个对象的内部过程一般有三步 * 1、创建一个空对象,并且 this 变量引用该对象,继承了该函数的原型prototype。 * 2、属性和方法被加入到 this 引用的对象中。 * 3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。 */

显式绑定(硬绑定) call , apply , bind

call和apply的区域在于传参的方式不同,但是作用基本一致 bind是es5的绑定方法,绑定后this无法改变,上面亦是如此 //因为call传入是obj,所以上下文this绑定于obj var obj = {a:2} function test4(){ console.log(this.a) } var testv4 = test4.call(obj); //2 /*bind的使用方法和call很类似,都是将obj作为上下文的this * 但是bind还是和call有区别之处 * bind是返回改变上下文this后的函数(新函数) * 使用call是 改变上下文this并执行函数 */ function test5(){ console.log(this.a) } var obj2 = {a:10086} var testv7 = test7.bind(obj2) testv7() //10086

隐式绑定

隐式绑定是要看是否有上下文对象,调用的时候是否给某个对象拥有或者包含;则该this绑定到该对象中。

/* * 注意点: * 这是对象的调用,所以this指向该对象 * 若是var testv6 = obj3.test8 ,就是函数别名赋值,则默认是使用默认绑定而非指向那个对象; */ function test6(){ console.log(this.a) } var obj3 = { a:10086, test6:test6 } obj3.test6() //打印值是10086 //对于多个链式调用的,this的指向取决最后一个对象。 var obj1 = {a:789 , obj2:obj2} var obj2 = { a:456, test8:test8} obj1.obj2.test6(); //456

软绑定(函数模拟的) 软绑定 是相对原生 bind 而言一个更灵活的绑定 this 的功能。bind 有一个弊端:被绑定后的新函数无法再更改 this

传送门:【关于软绑定代码疑问?】―这里可以看到比较详细的解答

箭头函数

箭头函数的基础教程,可以看我这篇文章: ES6折腾记- 箭头函数【Arrow function】要点及脱坑点

这里说下this和箭头函数的一些要点:

箭头函数的this绑定是根据词法作用域的,取决于外层作用域来决定 箭头函数绑定this无法修改, call , apply , bind 等都无法修改他 特别适合用于计时器这些,避免了 var self = this 这种写法 总结 若是把 undefined , null 作为this绑定对象参数传入 call , apply , bind ,会采用默认绑定规则,而参数依旧传入;比如你有一个数组想要依次分割传入一个函数中, apply 就可以做到;当然,ES6中的拓展运算符也可以做到 ... 【非常实用的一个操作符】,后续再写吧 在未来ES7 中,有一个关于 bind 语法 的提议,提议将 :: 作为一个新的绑定操作符,该操作符会将左值和右值(一个函数)进行绑定;若是能开展, this 在一些情况下都可以不用写了

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:javascript 跳跃式前进 (5) - 深入浅出 this[六种模式]
本站链接:http://www.codesec.net/view/484358.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(25)