首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

秒懂——惹人烦恼的this指向

▼▼▼ ▼▼ ▼ 关于 This 它是JS关键字,在JS中具有特殊意义,代表一个空间地址; this是执行的主体,谁执行的这个函数谁就是this。 惹人烦恼的this   This是什么?...既然这么麻烦,难倒无数js开发er,我们到底要做怎样的挣扎才能记住呢?且听下回...哦不,且往下看。 ? THIS   首先,我们介绍下关于this。 1. 什么是this指针?this指针指向哪里?...this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。 this永远指向其所在函数的真实调用者(谁调用的就指向谁,)如果没有所有者时,指向全局对象window。   ...a: 1, fn: function (n) { ... } } obj.fn(n); call/apply function fn (n){ ... } fn.call...当然,前两种方式也可以转变为第三种: fn(n) => fn.call(undefined,n) obj.fn(n) => obj.fn.call(obj,n)   因此,我们函数调用归根就是一种: fn.call

44620
您找到你想要的搜索结果了吗?
是的
没有找到

JS实用技巧篇】01-函数防抖|节流

文章目录 前言 函数防抖|节流 函数防抖 函数节流 总结 前言 本专栏主要是一些实用技巧,带大家灵活运用、并理解其思想;另外后续也会开设js核心知识方面的专栏带大家深入理解js这门语言。...由于个人刚完成js阶段的学习,却没有什么项目经验,另外感觉自己基础也不是很好;所以梳理了下js学习过程中个人认为必须掌握的一些知识点、技巧等,以此为后期的学习打下坚实的基础。...声明一个计时ID return function () { clearTimeout(timerId);//清除前面的计时ID timerId = setTimeout(() => fn.call...,即将该伪数组展开;则上面等效于fn.call(this,arg1,arg2...)...此处的fn.call(this, ...arguments) 也可用fn.apply(this,arguments)替换,此处的.call()和.apply()两个都是Function的原型方法,功能相同

56830

23·灵魂前端工程师养成-JavaScript函数

fn(){ console.log(this) }  如果 要指定this只能通过call来指定 fn.call(1) //如果 传的this不是对象,JS会自动帮你封装成对象  但是我们又不想让他给我瞎封装...那么就只能,在生命函数的时候,加上'use strict' function fn(){ 'use strict' console.log(this) } fn.call(1)  但是,没有人写代码...call传参会被分成两段,第一段是this 剩下的是arguments function fn(){ console.log(arguments) console.log(this) } fn.call...没有走Python的路,他选择了另一种,更难的路...这就是第二座大山this 使用this获取那个未来的对象,JS在每个函数中都加了this let person = { name: 'zls',...1,2) ---- 两种传递方式 1.隐式传递 fn(1,2) //等价于 fn(undefined,1,2) obj.child.fn(1) //等价于 fn(obj.child,1) 2.显示传递 fn.call

34720

javascript前端开发:腾讯超难面试题让你理解call的用法

function fn(a,b){ console.log(this); console.log(a); console.log(a+b); } fn.call(1); fn.call.call(...fn); fn.call.call.call(fn,1,2); fn.call.call.call.call(fn,1,2,3); 答案: fn.call(1); // 1,undefined,NaN...,undefined,NaN fn.call.call.call(fn,1,2); // 1,2,NaN fn.call.call.call.call(fn,1,2,3); // 1,2,5 题解: fn.call...fn.call 找到Function.prototype上的call方法(这也是一个函数,也是函数类的一个实例,也可以继续调用call/apply等方法)我们可以把fn.call看成一个函数 A 那么接下就等于...A.call(fn),这里执行call方法,把 A 中的关键字this修改为函数 fn ,然后再把函数 A(fn.call) 执行; fn.call.call.call(fn,1,2);通过上一条的原型链的方法我们可以把

72620

手写防抖函数 debounce 和节流函数 throttle

这里有个关键的点:fn.call(this, ...args),为什么要通过 call 这种修改函数内部 this 的方式来调用原函数?直接 fn() 不行吗?...js 版 网上基本都是用的高阶函数实现,即封装一个工具函数 debounce,它以参数形式接收原函数,并返回一个经过防抖处理的新函数,后续涉及到需要防抖处理的,都需要使用新函数来替代原函数。...如果原函数本来挂载在某对象上,新生成的函数也需要挂载到那对象上,因为 debounce 内部的 fn.call(this) 时,这个 this 是指返回的新函数调用时的 this。...当然,以上的 js 版实现,只是一种最基础的方案,文章开头给出的链接中,还有很多扩展的实现,比如增加了支持第一次触发立即执行的功能;和 throttle 节流结合用法;手动取消延迟的功能等等。...ts + angular 版 我还想讲讲我在实际项目中所进行的防抖处理,上面的 js 版在每篇防抖文章中,基本都是那样实现,都是封装一个高阶函数。

2.9K20

手把手教你剖析,并手写十五个重要 API 的实现

作者:神三元 在面试中,常常会遇到一些手写XXX之类的面试题,因此好好总结一下,对于巩固我们的原生js的基础是非常必要的。...如果站在面试官的角度,他的目的是在最短的时间内考察出面试者对于JS语言的理解程度,但是在看了网站的诸多总结文章后我发现其中的代码有很大一部分是做意义不大的操作,比如实现一个简单的防抖,只要是核心的流程展示即可...由于是ES5所以就不用...展开符了 var mappedArr = []; for (var i = 0; i < arr.length; i++ ){ mappedArr.push(fn.call...0 : 1; for(var i = startIndex; i < arr.length; i++) { res = fn.call(null, res, arr[i], i, this)...插件封装](https://juejin.im/post/5cf4c8ce6fb9a07efc4973a6#heading-0 "基于"发布-订阅"的原生JS插件封装")中的手写发布订阅部分。

35230

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券