谈谈代码中的this
js中我们常常会遇到this,this的具体指向问题对于很多同学来说是很懵懂的;就想lz刚开始接触时候就是一脸的懵逼,经常被一些题目转的眼花缭乱。那么今天lz就跟大家一起交流一下这个this的指向问题!
背景:不久前有个同事给我们发了一道有关this的题目,于是便有了今天的故事。如下题:
class D0XX {
constructor () {
this.attr = {};
}
init (config) {
this.assign(config)
return this;
}
assign (config) {
this.attr.afterClose = config.afterClose;
}
close(){
if(typeof this.attr.afterClose === 'function'){
this.attr.afterClose();
}
}
}
class T0XX{
init(){
this.openPop()
}
openPop(){
new D0XX().init({
afterClose(){
console.log(this)
}
}).close()
}
}
new T0XX().init();
//請問打印出結果是什麼?
一、且搁下此题目,我们先谈谈this的指向的以下几个情况;
1.1.指向全局对象上;
我们在一般的函数调用中的this是直接指向我们的全局对象的,比如:
function globalThis(){
console.log(this.name);//今天天氣真冷哇
}
var name = '今天天氣真冷哇'
globalThis(); setTimeout(function(){
console.log(this.name2);
},1000);
var name2 = '過了一秒鐘,我就更冷了'
这里的setTimeout里面的this是指向window对象的!
1.2.指向上文对象
通俗点就是,哪个对象看上了我,我就跟谁,比如:
function foo() {
console.log(this.a);
}
var obj = {
a: '李四',
foo: foo
}
var a = '張三';
obj.foo(); //李四 看前面是哪个对象(obj),于是this跟obj一见钟情就好上了
var bar = obj.foo;
bar();//張三 你以为的以为。。 前面说过看对象,没对象,那就只能全局对象上茫茫人海只为寻她
1.3.指向那个‘类’
我们一般用构造函数进行调用时,会产生一个this始终是指向这个‘类’,我们复习下new 一个对象发生了什么:
1.创建一个全新的对象。
2.这个对象会被执行[[Prototype]]连接。
3.这个新对象会绑定到函数调用的this
。
4.执行这个函数里的代码。
5.如果函数没有返回其他对象,则自动返回这个新对象。
function fun() {
this.a = 1;
this.b = 2;
}
var instance = new fun();
console.log(instance.a);//
1.4.箭头函数this指向当前作用域
箭头函数this指向取决于外层的函数作用域或全局作用域,而且箭头函数的绑定无法修改,即使是new
绑定也不可以。
document.onclick = ()=>{
console.log(this) //window
}
document.onclick=function(){
console.log(this) //document
}
二、如何改变this的绑定关系
2.1.显式绑定
在此之前,相信你已经用过很多次apply
和call、
bind函数了,使用这三个函数可以直接为你要执行的函数指定this
,所以这种方式称为显式绑定。
function foo () {
console.log(this.a)
}
var obj = {
a: 2
}
foo.call(obj) // function foo (something) {
console.log(this.a, something)
return this.a + something
}
var obj = {
a: 2
}
var bar = foo.bind(obj); // bind返回一个绑定到obj上的新函数
var b = bar(3)
console.log(b)
var a = "window's a"
foo('!')
如上就可以通过这种显式的方法进行改变绑定关系了;
三、回归到之前同事的题目上
通过以上的分析,我们就能够很清楚的分析出以上的答案是指向this.attr这个对象的,别看题目里又有new字符又有return this;这些东西,很容易让人迷糊;但是如果我们能掌握住this的这几种指向情况,相信会易容反掌的多;
四、如果改动以上的题目你还知道么?
class D0XX {
constructor () {
this.attr = {}
}
init (config) {
this.assign(config)
return this
}
assign (config) {
this.afterClose = config.afterClose
}
close(){
if(typeof this.afterClose === 'function'){
this.afterClose()
}
}
}
class T0XX{
init(){
this.openPop()
}
openPop(){
new D0XX().init({
afterClose(){
console.log(this)
}
}).close()
}
}
new T0XX().init()
//請問打印出結果是什麼?
最后,小Tip~就是之所以demo中可以使用链式调用是因为init方法中return出了this;这就跟jQuery中的链式调用有了异曲同工之妙;
如有不妥,欢迎指教!
谈谈代码中的this的更多相关文章
- 谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持
谈谈WCF中的Data Contract(3):WCF Data Contract对Collection & Dictionary的支持 在本篇文章上一部分Order Processing的例 ...
- 简单谈谈js中的MVC
MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): ...
- 谈谈JAVA中的安全发布
谈谈JAVA中的安全发布 昨天看到一篇文章阐述技术类资料的"等级",看完之后很有共鸣.再加上最近在工作中越发觉得线程安全性的重要性和难以捉摸,又掏出了<Java并发编程实战& ...
- 谈谈CSS中一些比较"偏门"的小知识
前面我写了:谈谈html中一些比较"偏门"的知识,现在这篇(主要)想谈谈个人所见的CSS一些小知识点,加深印象:同时也希望有需要的人能有收获! 1.常见的浏览器内核: 以IE为代表 ...
- 谈谈WPF中的CollectionView与CollectionViewSource (1)
原文:谈谈WPF中的CollectionView与CollectionViewSource (1) 谈谈WPF中的CollectionView与CollectionViewSource (1) ...
- 谈谈Integer中的静态类IntegerCache
学习的本质就是一个赋值的过程,用新知识来覆盖你的旧知识或者无知(null).掌握知识是自己的, 分享知识,才能帮助更多的人,创造更大的价值.学贵以恒,以此自勉,与君共享.----曦阳X ...
- 谈谈javascript中的prototype与继承
谈谈javascript中的prototype与继承 今天想谈谈javascript中的prototype. 通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性 ...
- 移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签)
移动端网站如何开发(电脑端网站到手机端网站我们需要在html代码中添加哪个meta标签) 一.总结 一句话总结: 添加viewport标签:meta name="viewport" ...
- Python-Jenkins API使用 —— 在后端代码中操控Jenkins
最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...
随机推荐
- day19面向对象 , 用户注册和登录
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.简述编写类和执行类中方法的流程."""编写:class Person: d ...
- Arrays和String单元测试 20175301
要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 一.String类相关方法的单元测试 1.ChatAt的测试 代码: import org.junit.Test; impor ...
- sql连接查询中的分类
sql连接查询中的分类 1.内连接(结果不保留表中未对应的数据) 1.1等值连接:关联条件的运算符是用等号来连接的. 1.2不等值连接:连接条件是出等号之外的操作符 1.3自然连接:特殊的等值连接,在 ...
- [译]Ocelot - Service Discovery
原文 你可以指定一个service discovery provider,ocelot将使用它来找下游的host和port. Consul 下面的配置要放在GlobalConfiguration中.如 ...
- VS注释快捷键
注释: 先CTRL+K,然后CTRL+C 取消注释: 先CTRL+K,然后CTRL+U 代码自动对齐:1, ctrl+a 2, ctrl+k 3, ctrl+f
- react native 安卓home返回键页面刷新
import { withNavigationFocus } from 'react-navigation'; class Warngreete extends React.Component { c ...
- 题解 P1801 【黑匣子_NOI导刊2010提高(06)】
蒟蒻来发题解了.我仔细看了一下其他题解,各位巨佬用了堆,红黑树,splay,treap之类的强大算法,表示蒟蒻的我只会口胡这些算法,所以我决定用一种极其易理解的算法————fhq treap,作为tr ...
- iptables 防火墙日常
. 检查机目标机器 httpd 服务/etc/init.d/httpd status ========================================================= ...
- 关于dfs
DFS 关于dfs,我的理解就是深度搜索,找到所有与入口相连的路径,可以用于迷宫求出口,利用递归的思想,进行搜索返回所有值. 比如,给你两个值分别表示迷宫的长和宽,迷宫有一个入口,一个出口,判断能否从 ...
- javascript 事件冒泡和事件代理
事件冒泡 简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素. 这可能会带 ...