js 中的this 到底指向哪里涅,学习js的过程中,肯定有不少小伙伴们调入this的大坑中,究其原因,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁调用的就指向谁。。。曾经,我也被this虐的不要不要的,然鹅this虐我千百遍,我待this如初恋,今天本骚年就以拙劣的文笔试着把this说清楚,老规矩,show you the code:

var app = {
fn1: function () {
console.log('fn1->', this)
}, //对象的方法,套路1
fn2: function () {
return function () {
console.log('fn2->', this)
}
}, //匿名函数,套路2
fn3: function () {
function fn() {
console.log('fn3->', this)
}
fn()
}, //普通函数,套路2
fn4: function () {
return {
fn: function () {
console.log('fn4->', this)
}
}
}, //对象内部方法,套路1
fn5() {
setTimeout(function () {
console.log('fn5->', this)
}, 10)
}, //匿名函数内部,套路2
fn6() {
setTimeout(() => {
console.log('fn6->', this)
}, 20)
}, //箭头函数 指向fn6的作用域,this是app,套路4
fn7() {
setTimeout((function () {
console.log('fn7->', this)
}).bind(this), 30)
}, //bind 方法绑定this 是app,套路5
fn8: () => {
setTimeout(() => {
console.log('fn8->', this)
}, 40)
} //箭头函数,所以this突破对象app,全局对象this指向window,套路4
}

以下是this的一些套路:

1.对象内部方法的this指向调用这些方法的对象

2.普通函数和匿名函数内部,this指向window

3.构造函数中的this与被创建的新对象绑定。(本例用不到)

4. 箭头函数指向函数所在的所用域: 注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域;(这很关键) ,或者这样理解,箭头函数其实是没有 this 的,这个函数中的 this 只取决于他外面的第一个不是箭头函数的函数的 this。

5.通过bind方法绑定后, 函数将被永远绑定在其第一个参数对象上, 而无论其在什么情况下被调用

this 知多少的更多相关文章

  1. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. Python 爬虫模拟登陆知乎

    在之前写过一篇使用python爬虫爬取电影天堂资源的博客,重点是如何解析页面和提高爬虫的效率.由于电影天堂上的资源获取权限是所有人都一样的,所以不需要进行登录验证操作,写完那篇文章后又花了些时间研究了 ...

  3. 谈谈一些有趣的CSS题目(三)-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  4. scrapy 知乎用户信息爬虫

    zhihu_spider 此项目的功能是爬取知乎用户信息以及人际拓扑关系,爬虫框架使用scrapy,数据存储使用mongo,下载这些数据感觉也没什么用,就当为大家学习scrapy提供一个例子吧.代码地 ...

  5. 读书笔记汇总 - SQL必知必会(第4版)

    本系列记录并分享学习SQL的过程,主要内容为SQL的基础概念及练习过程. 书目信息 中文名:<SQL必知必会(第4版)> 英文名:<Sams Teach Yourself SQL i ...

  6. 在知乎上看到 Web Socket这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错

    在知乎上看到这篇文章讲得确实挺好,从头看到尾都非常形象生动,一口气看完,没有半点模糊,非常不错,所以推荐给大家,非常值得一读. 作者:Ovear链接:https://www.zhihu.com/que ...

  7. 程序员必须要知道的Hadoop的一些事实

    程序员必须要知道的Hadoop的一些事实.现如今,Apache Hadoop已经无人不知无人不晓.当年雅虎搜索工程师Doug Cutting开发出这个用以创建分布式计算机环境的开源软...... 1: ...

  8. css知多少之绝对定位小记

    一.position定位常见属性 对于属性position来说,属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详 ...

  9. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  10. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

随机推荐

  1. 数据去重优化 MemoryError 内存不足

    from ProjectUtil.usingModuleTOMODIFY import getNow export_q_f, q_l, start_ = '/mnt/mongoexport/super ...

  2. B. Factory Repairs---cf627B(线段树)

    题目链接:http://codeforces.com/problemset/problem/627/B 题意:有一个工厂生产零件,但是机器是不正常的,需要维修,维修时间是 k 天,在维修期间不能生产, ...

  3. day11(jsp入门&Cookie&HttpSession&一次性图片校验码)

    day11 JSP入门   1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据. ...

  4. mysql 数据操作 多表查询 子查询 带EXISTS关键字的子查询

    带EXISTS关键字的子查询 EXISTS关字键字表示存在. EXISTS 判断某个sql语句的有没有查到结果 有就返回真  true 否则返回假 False 如果条件成立 返回另外一条sql语句的返 ...

  5. chm帮助文档制作及C#调用

    http://zhoufoxcn.blog.51cto.com/792419/166049 http://wenku.baidu.com/view/a90adbd249649b6648d74794.h ...

  6. (转)帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  7. TabControl delphi

    1.TTabControl 组件的典型用法TTabControl 组件使用起来,根本不会使程序简单化,所以不提倡使用此组件,可以用TPageControl组件代替.与多页组件不同的是,虽然Tab 组件 ...

  8. 自定义查询语句SpringData

    虽然官方的API中给我们提供了很多关键字的查询,但是还是不够灵活,因为我们在项目中,会遇见奇葩的业务,我们需要用SpringData中的一个@Query注解. 使用@Query自定义查询 这种查询可以 ...

  9. (1)了解cocostudio基础

    操作界面   Cocos Studio的界面主要分为菜单栏.工具栏.对象面板.资源面板.画布面板.属性面板.动画面板.输出窗口.状态栏九部分组成,如下图: 菜单栏   菜单栏为Cocos Studio ...

  10. 常用php操作redis命令整理(五)ZSET类型

    ZADD 向有序集合插入一个元素,元素关联一个数值,插入成功返回1,同时集合元素不可以重复, 如果元素已经存在返回 0 <?php var_dump($redis->zadd(,'A')) ...