javascript 之this指针-11

一.概况

eoLinker 是时正式领先、国内最特别之在线 API 接口管理平台,提供自动生成 API 文档、API 自动化测试、Mock 测试、团队合作等职能,旨在缓解由于前后端分离造成的付出效率低下问题。

当前 eoLinker 为 Google、IBM、腾讯、中国联通、海尔、神州优车、国美等数千贱合作社提供高速、专业、稳定的
API 管理服务。同时 eoLinker 还是 Google 谷歌开发者联盟的搭档产品及店,不定期开办线下交流分享活动推动国内
API 管理领域的升华。

 

语言 1

 前言

以《javascript
之履环境-08》文中说到,当JavaScript代码执行一截可实施代码时,会创对应之实践上下文(execution
context)。对于每个执行上下文,都发生三个举足轻重性质:

  • 变量对象(Variable object,VO)
  • 意域链(Scope chain)
  • this

JavaScript中的this跟其他语言稍微不均等,比如Java .net言语中之this是在代码的执行等级是不可变的,而JavaScript的this凡是以调用阶段展开绑定。也盖及时同特性为了this挺挺的灵活性,即当函数在不同之调用方式下还或会见导致this的价不同;

二.开源路及链接

汉语官网:www.eolinker.com

开源支持:https://www.eolinker.com/#/os/download

Github:https://github.com/eolinker

码云:https://gitee.com/eoLinker-API-Management

Coding:https://coding.net/u/eolinker/project

Blog:http://blog.eolinker.com

视频教程:http://blog.eolinker.com/\#/course/

定义

  this
对象是当运行时因函数的履环境绑定的,跟函数的调用位置有关而未是声称的职务;可以理解也this是当函数调用阶段绑定,也尽管是执行上下文创建的号展开赋值,保存在变量对象被;

三.特性

1、免费都开源,eoLinker 拥有无敌的免费产品,在过去的平等年里
eoLinker 已迭代超过 300 个版,优化近千素养能点,同时采纳开源精神,提供国际化的开源产品(支持中文简体、繁体以及英语),为科普的出、测试与管理人员提供专业的制品。

2、同类产品中最精锐的 API 文档管理网,支持时 HTTP/HTTPS 协议以及所有主流请求方式,并且提供了强大的本管理力量,可以随时随地回滚
API 信息。同时支持数据库管理、状态码管理、项目文档管理等于常用管理功能。

3、代码自动生成文档,通过读取代码中之 EOML ( eoLinker 标注语言)注解,eoLinker 可以自动生成 API 文档,省去了又录入的劳动,无缝连接开发和管理工作。

4、API 接口测试,支持文件、在线、跨域、自动化测试相当效果。同时具有参数构造器,可以本着要参数进行自动构造,加密、分割、随机字符串等功能到。配合测试用例可以好便于地对待请求结果跟范,找来
API 可能出现的题目。

5、API 自动化测试,eoLinker 是时下全世界唯一一舒缓支持界面与代码双模式之自动化测试工具。在
UI 界面模式下,你无需要编制任何代码即可创建数量交互关系的
API 测试用例(比如注册-登录-检查登陆状况-退出登录);同时您啊得由此编制 Javascript 代码来组织复杂的自动化测试场景。这些都大幅度地简化了出测试人员的
API 测试工作,每次出到位就待一个键即可自动测试所有
API 并且转变测试报告,帮助了解项目 API 的健康状况。

6、API Mock 测试,提供最强的 Mock 功能,支持 MockJS,支持电动刷新返回结果和强赶回的结果。同时还支持对
API 进行呼吁校验,当参数或值不相符预设的模版时能就寻找有问题所在。

7、支持文档分享同导出,你可经过 eoLinker 在线生成接口文档,也得导出成为 HTML、PDF 以及 Word 等,快速分享要发布 API 信息。

8、支撑 Postman、RAP、RestClint 等数导入,无需更录入 API 信息,一键导入即可切换平台。

9、精的团伙协作功能,你可通过 URL 快速邀请成员要加入某个项目,eoLinker 提供了完善的日记追踪和权限管理功能。

10、有最圆的活线,eoLinker 除了有着线及本之外,还提供了免费开源版本、浏览器插件、PC 端桌面程序等,可以满足公司有所的 API 管理要求。

季种植绑定规则

四.图片简介

语言 2

语言 3

语言 4

 

语言 5

 

new 构造函数绑定,this指为新创办的靶子

 1 function createPerson(){
 2        return new person();
 3     }
 4     function person() {
 5         this.name = "Joel";
 6         this.say=function(){
 7             console.log(p)
 8             console.log('hello' + this.name)
 9         }
10     }
11     var p = new person();
12     p.say();
13     console.log(p.name);//Joel
14     console.log('开始')
15     var t=createPerson();
16     t.say();

管是一直new 还是经过function createPerson 函数回的靶子,this
都是据为了初创办出来的对象;

 总结:

 eoLinker 吸收了 Postman 以及 RAP 等接口管理产品的长,开发出了广大正式首创以及领先的功用,同时针对国内市场做出了众多底优化改进,提倡远程办公与高效开发,深受全球的汉语开发者的爱慕,真正到位了让接口管理更简明。如果你在工作中可能会见就此到接口,或者对接口感兴趣,推荐你注册一波打听一下。

来得绑定,this指为污染进的靶子

 1     //call() apply() bind() 显示绑定
 2     window.color = "red";
 3     var Obj = { color: "blue" };
 4     function sayColor() {
 5         console.log(this.color);
 6     }
 7     sayColor();// red this window
 8     sayColor.call(this);//red
 9     sayColor.call(window);//red
10     sayColor.call(Obj);// blue 把this指针改为对象Obj
11     sayColor.apply(Obj);//blue 把this指针改为对象Obj
12     sayColor.bind(Obj)();//blue 把this指针改为对象Obj

倘若你把null/undefined作为this的绑定对象传入call/apply/bind,这些价值在调用时见面让忽视,实际用之是默认的绑定规则语言;

1   function foo() {
2       console.log(this.a)
3     }
4    var a=2;
5     foo.call(null);//2
6     foo.call(undefined);//2

隐士绑定

以目标的方法形式调用,this指向当前夫目标

 1    function foo(){
 2         console.log(this)//{a: 2, name: "Joel", foo: ƒ}
 3         console.log(this.a)//2
 4     }
 5     var obj={
 6         a:2,
 7         name:'Joel',
 8         foo:foo
 9     };
10     obj.foo();

这时this指向当前obj对象,但是倘若换种写法会造成this 丢失问题。

 1     function foo(){
 2         console.log(this)//{a: 2, name: "Joel", foo: ƒ}
 3         console.log(this.a)//2
 4     }
 5     var obj={
 6         a:2,
 7         name:'Joel',
 8         foo:foo
 9     };
10     obj.foo();
11     //this 丢失的问题
12     var t= obj.foo;
13     t(); //window undefined

变量t此时保存之是函数的援跟obj已经没有涉嫌,所以这时this指为window。

默认绑定 严格模式下this 绑定到undefined,否则绑定到全局对象 window

 1   function foo(){
 2         console.log(this)//window
 3         console.log(this.a)//Joel
 4     }
 5     var a='Joel';
 6     foo();
 7 
 8     //严格模式
 9     function fo(){
10         'use strict'  //严格模式
11         console.log(this)//undefined
12         console.log(this.b)//报错 Cannot read property 'b' of undefined
13     }
14     var b='Joel';
15     fo();

以上是骨干的this绑定规则,其中new、显示绑定好爱看清,其中于便于错的凡便于把默认绑定误认为是隐士绑定
如匿名函数、闭包、函数当做参数等;

独立调用:this 指向window

 1   var name='Joel',age=12;
 2     function say(){
 3         function say1(){
 4             console.log(this.name);//window
 5             function say2(){
 6                 name+='-l'
 7                 console.log(this.name);//window
 8             }
 9             say2()
10         }
11         say1();
12     }
13     say();
14 
15     //匿名函数
16     (function(){
17        console.log(this.name)
18     })()

function 当做参数传递其实和独立调用一样的法则

 1 function foo() {
 2         console.log(this)//window
 3         console.log(this.a)//oops global
 4     }
 5     function doFoo(fn) {
 6         console.log(this);//window
 7         fn();//类似与 foo()
 8     }
 9     var obj = {
10         a: 2,
11         foo: foo
12     }
13     var a = 'oops global';
14     doFoo(obj.foo);

暨理setTimeout 也是千篇一律

 1  var obj = {
 2         a: 2,
 3         foo: function() {
 4             console.log(this); 
 5         },
 6         foo2: function() {
 7             console.log(this);   //this 指向 obj 
 8             setTimeout(this.foo, 1000);   // this 指向 window 
 9         }
10     }
11     var a = 'oops global';
12     obj.foo2();

闭包中的this

 1     var name = "Joel";
 2     var obj = {
 3         name: "My object",
 4         getName: function() {
 5             // var that = this;   // 将getNameFunc()的this保存在that变量中
 6             return function() {
 7                 return this.name;
 8             };
 9         }
10     }
11     console.log(obj.getName()());   // "Joel"

这边的虽然是目标的法形式调用obj.getName(),在getName中之this是依为obj,但是返的匿名函数中之this
为什么是window呢?

把最终之一律句子拆成稀独步骤执行:

1 var t=obj.getName();
2 t();

凡匪是出硌像以独立调用呢?如果欲拜访obj中的name,只需要将this对象缓存起来,在匿名函数中做客即可,把var
that=this;去丢注释即可;

总结

  • this
    是变量对象的一个性能,是以调用时为绑定的,跟函数的调用位置有关而不是宣称的位置;
  • 找到调用位置,根据绑定规则来分析this 绑定;
  • 默认绑定严格模式下this 绑定到undefined,否则绑定到全局对象 window;

思考题

 1     var length = 5;
 2     var obj = {
 3         foo: function (fn) {
 4             console.log(this.length); // this => obj
 5             fn(); // this => window
 6             arguments[0](); // this => arguments
 7             var bar = arguments[0];
 8             bar(); // this => window
 9         },
10         length: 10
11     }
12     var fn = function () {
13         console.log(this.length);
14     }
15     obj.foo(fn);
16     //10, 5, 1, 5

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图