资讯专栏INFORMATION COLUMN

关于 this 的四类用法

Hanks10100 / 521人阅读

摘要:构造器中的指向新对象中,我们通过关键词来调用构造函数,此时会绑定在该新对象上。输出顺便说一句,在中,构造函数普通函数对象方法闭包,这四者没有明确界线。

this

在函数执行时,this 总是指向调用该函数的对象。要判断 this 的指向,其实就是判断 this 所在的函数属于谁。

在《javaScript语言精粹》这本书中,把 this 出现的场景分为四类,简单的说就是:

有对象就指向调用对象

没调用对象就指向全局对象

用new构造就指向新对象

通过 apply 或 call 或 bind 来改变 this 的所指。

1) 函数有所属对象时:指向所属对象

函数有所属对象时,通常通过 . 表达式调用,这时 this 自然指向所属对象。比如下面的例子:

jsvar myObject = {value: 100};
myObject.getValue = function () {
  console.log(this.value);  // 输出 100

  // 输出 { value: 100, getValue: [Function] },
  // 其实就是 myObject 对象本身
  console.log(this);

  return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() 属于对象 myObject,并由 myOjbect 进行 . 调用,因此 this 指向对象 myObject

2) 函数没有所属对象:指向全局对象
jsvar myObject = {value: 100};
myObject.getValue = function () {
  var foo = function () {
    console.log(this.value) // => undefined
    console.log(this);// 输出全局对象 global
  };

  foo();

  return this.value;
};

console.log(myObject.getValue()); // => 100

在上述代码块中,foo 函数虽然定义在 getValue 的函数体内,但实际上它既不属于 getValue 也不属于 myObjectfoo 并没有被绑定在任何对象上,所以当调用时,它的 this 指针指向了全局对象 global

据说这是个设计错误。

3) 构造器中的 this:指向新对象

js 中,我们通过 new 关键词来调用构造函数,此时 this 会绑定在该新对象上。

js
var SomeClass = function(){ this.value = 100; } var myCreate = new SomeClass(); console.log(myCreate.value); // 输出100

顺便说一句,在 js 中,构造函数、普通函数、对象方法、闭包,这四者没有明确界线。界线都在人的心中。

4) apply 和 call 调用以及 bind 绑定:指向绑定的对象

apply() 方法接受两个参数第一个是函数运行的作用域,另外一个是一个参数数组(arguments)。

call() 方法第一个参数的意义与 apply() 方法相同,只是其他的参数需要一个个列举出来。

简单来说,call 的方式更接近我们平时调用函数,而 apply 需要我们传递 Array 形式的数组给它。它们是可以互相转换的。

jsvar myObject = {value: 100};

var foo = function(){
  console.log(this);
};

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85670.html

相关文章

  • 四大深度学习框架+四类GPU+七种神经网络:交叉性能评测

    摘要:最近,等人对于英伟达的四种在四种不同深度学习框架下的性能进行了评测。本次评测共使用了种用于图像识别的深度学习模型。深度学习框架和不同网络之间的对比我们使用七种不同框架对四种不同进行,包括推理正向和训练正向和反向。一直是深度学习方面最畅销的。 最近,Pedro Gusmão 等人对于英伟达的四种 GPU 在四种不同深度学习框架下的性能进行了评测。本次评测共使用了 7 种用于图像识别的深度学习模...

    jk_v1 评论0 收藏0
  • 细说 jQuery DOM操作篇(二) - DOM 树操作

    摘要:此时,点击新建的将会触发。设置元素内容的方法则使用上述两种方法,将新内容作为参数传递即可,例如修改上例中的文本内容方法同理。 我们知道通过 $() 函数可以访问文档中的元素,并返回一个 jQuery 对象,并且通过一系列方法,我们可以修改元素的样式和内容,实际上,我们还可以通过该函数做更多的事情,例如添加、删除、复制等操作来改变 DOM 树的结构。 创建元素 我们可以通过 $() ...

    Anchorer 评论0 收藏0
  • 纯干货!一切关于jquery选择器

    摘要:本人的两篇原创文章纯干货一切关于选择器和纯干货之操作解析,发布不到个月,就被博客园某账号认领为他的原创,并且他还精心地将慕课网原创文章的版权声明和文章中关于我的点点滴滴,删除地干干净净,很专业。   本人的两篇原创文章纯干货!一切关于jquery选择器和纯干货!jQuery之DOM操作解析,发布不到1个月,就被博客园某账号 认领 为他的原创,并且他还精心地将慕课网原创文章的版权声明和文...

    gecko23 评论0 收藏0
  • Polyfill:Function.prototype.bind的四个阶段

    摘要:第二阶段被忽略的细节函数的属性,用于表示函数的形参。第三阶段被忽视的细节通过生成的构造函数。五本文涉及的知识点的用法的用法除操作符外的构造函数的用法下诡异的命名函数表达式技术六总结在这之前从来没想过一个的会涉及这么多知识点,感谢给的启发。 昨天边参考es5-shim边自己实现Function.prototype.bind,发现有不少以前忽视了的地方,这里就作为一个小总结吧。 一、Fu...

    mudiyouyou 评论0 收藏0
  • react关于事件绑定this的四种方式

    摘要:在组件中,每个方法的上下文都会指向该组件的实例,即自动绑定为当前组件而且还会对这种引用进行缓存,以达到和内存的最大化。 在react组件中,每个方法的上下文都会指向该组件的实例,即自动绑定this为当前组件,而且react还会对这种引用进行缓存,以达到cpu和内存的最大化。在使用了es6 class或者纯函数时,这种自动绑定就不复存在了,我们需要手动实现this的绑定以下是几种绑定的方...

    张利勇 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<