js fn.call() - 腾讯云开发者社区

文章/答案/技术大牛

发布

秒懂——惹人烦恼的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

5082 0

微信小程序函数防抖和函数节流

多用于页面scroll滚动、窗口resize、防止按钮重复点击函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次小程序中使用函数防抖、节流一般都将这两种方法封装在公用的js...中 //common.js /*函数节流*/ function throttle(fn, interval) { var enterTime = 0; //触发的时间 var gapTime...that = this; var backTime = new Date(); //第一次函数return即触发的时间 if(backTime - enterTime > gapTime) { fn.call...= arguments; //保存arguments setTimeout是全局的 arguments不是防抖函数需要的 timer = setTimeout(function() { fn.call

1.6K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

花式解说防抖函数debounce的实现

一、概念防抖 debounce 和节流 throttle 的概念并不是 JS 所特有的。它们是在对函数持续调用时进行不同控制的两个概念。今天我们先介绍防抖。防抖是为了避免用户无意间执行函数多次。...function(...args) { if (timerId) clearTimeout(timerId); timerId = setTimeout(() => { fn.call...(this, args); + } timerId = setTimeout(() => { fn.call(this, args); }, wait); }; }...(this, args); } timerId = setTimeout(() => { fn.call(this, args); + timerId = null;...(this, args); } timerId = setTimeout(() => { fn.call(this, args); + setTimeout(() =

1.1K4 0

在 selenium IDE 插件中添加上传云端平台的功能

/** * 原生 js 的 Ajax 函数 * @type {{get: Ajax.get, post: Ajax.post}} */ const Ajax = { get: function...if ((xhr.readyState == 4 && xhr.status == 200) || xhr.status == 304) { // 从服务器获得数据 fn.call...= function() { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call

1.6K2 0

【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的原型方法，功能相同

7903 0

30·灵魂前端工程师养成-jQuery中的设计模式

"> js"> jquery.js window.jQuery = function(){...newApi }, each(fn){ for(let i=0;i<elements.length;i++){ fn.call...newApi }, each(fn){ for(let i=0;i<elements.length;i++){ fn.call...newApi }, each(fn){ for(let i=0;i<elements.length;i++){ fn.call...newApi }, each(fn){ for(let i=0;i<elements.length;i++){ fn.call

1.8K2 0

JavaScript 函数式编程解析（上）

可移植性是 JS 的一个强大特性，函数会通过 socket 序列化并传输，意味着在 web worker 中我们可以运行所有代码。.....args) { if (args.length < arity) { return $curry.bind(null, ...args); } return fn.call...以下是一个通用的 compose 函数： const compose = (...fns) => (...args) => fns.reduceRight((res, fn) => [fn.call(null.....args) { if (args.length < arity) { return $curry.bind(null, ...args); } return fn.call...js,console [6] 完整代码: https://jsbin.com/dokajarilo/1/edit?

8562 0

Javascript Array常见方法说明

ES5中新增了写数组方法，如下： forEach (js v1.6) map (js v1.6) filter (js v1.6) some (js v1.6) every (js v1.6) indexOf... (js v1.6) lastIndexOf (js v1.6) reduce (js v1.8) reduceRight (js v1.8) 浏览器支持 Opera 11+ Firefox 3.6+...+) { if (typeof fn === “function” && Object.prototype.hasOwnProperty.call(this, k)) { fn.call...fn.call(context, this[k], k, this); } } return passed; }; }于是，我们就有了“朕准了”的demo，您可以狠狠地点击这里：兼容处理后的...fn.call(context, this[k], k, this); } } return passed; }; }还是那个朕的例子，您可以狠狠地点击这里：是否every

9862 0

JavaScript观察者模式

最后，订阅者界面 js...="text" id="gfbText"> Js.../设计模式第三部分/观察者模式/lib.js"> Js/设计模式第三部分/观察者模式/观察者模式.js"> 效果为：（1）...for ( var i = 0;len < this.length; ++i ) { //这样写不是简单的函数调用,是在函数调用的同事把this重新定位 fn.call...fn.call(scope, this[i], i, this) ) {//过滤的实质是返回除开与当前对象相等的其余所用的对象集合 continue;

5662 0

《你不知道的JavaScript》：this 绑定规则

js的宿主环境有时会提供一些非常特殊的函数，它们并没有这两个方法，尽管这样的函数非常罕见。js提供的绝大多数函数和用户自己创建的所有函数都可以使用call和apply方法。...看下面例子： function fn(){ console.log(this.a); } var obj = { a: 20 } fn.call(obj); // 20 通过...fn.call()，可以在函数fn调用时强制把它内部的this绑定到obj对象上面。...硬绑定： function fn(){ console.log(this.a); } function bar(){ fn.call(obj) } var obj = { a:...那这个构造方法是不是就这js中构造函数呢？看起来好像啊。其实在js中这样理解是错的。 js中本质上是没有类这样概念的，js是基于原型的。

6923 0

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

4772 0

call，apply，bind 的完全实现和理解

Function.prototype.mycall\= function(context,...args) { context.fn= this; //这里的this指向调用该方法的实例，也就是fn.call...传参格式不一样 fn.call(context,arg1,arg2,arg3,...) fn.apply(context,[arg1,arg2,arg3,...])...Function.prototype.mybind = function(context) { return function() { return fn.call(context);...Function.prototype.mybind = function(context, ...args) { return function(...args2) { return fn.call...总结总的来说call，apply，bind这三个方法涉及到了js的诸多方法，如果能够完全理解的话，对于学习js会有很大帮助原文地址http://www.leelei.info/article/9

9195 1

call、apply、bind 改变this方法总结

在js中所有函数都会自带改变this指向的三大方法 1. call fn.call(对象，参数1，参数2....) 执行函数，并改变函数内部的this，指向传入的第一个参数对象。

4302 0

call、apply、bind的应用和区别

1. call( ) 面试中常问的Js中关于call、apply、bind的问题，比如：怎么利用call、apply来求一个数组中最大或者最小值如何利用call、apply来做继承 apply、call...Math.max.apply(null, arr1)); // 19 直接可以用arr1传递进去例子2: function fn() { console.log(this); } // apply方法结果同下 fn.call...(); // 普通模式下this是window，在严格模式下this是undefined fn.call(null); // 普通模式下this是window，在严格模式下this是null fn.call...undefined); // 普通模式下this是window，在严格模式下this是undefined 应用 ① 将伪数组转化为数组（含有length属性的对象，dom节点, 函数的参数arguments） js

5635 0

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);通过上一条的原型链的方法我们可以把

7892 0

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

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

3.5K2 0

小程序bindtap传参_微信小程序bindtap

class="type" bindtap='clickToDetail' id="{ {item.id}}" data-title="西湖" data-place="杭州"> // js...title=' + title +'&place='+ place, }) } // 在 detail 的 js 页面，在 onload 预加载周期函数中，可获得该参数： onLoad: function...// 这种写法 bindconfirm 绑定的函数在点击软键盘右下角回车键时，触发 searchIt 函数 // confirm-type="search" 写法，使右下角回车键显示为 ‘搜索’ js...context, delay, text) { clearTimeout(fn.timeoutId); fn.timeoutId = setTimeout(function () { fn.call

1.7K1 0

JavaScript很简单？那你理解forEach对吗？

因为很多时候，forEach 方法被用来代替 for 循环来完成数组的遍历，所以经常可以看见 forEach 的一些 js 实现，例如： Array.prototype.forEachCustom =...throw new TypeError(fn + 'is not a function'); } for (let i = 0; i < this.length; i++) { fn.call...// ECMA文档使用的是HasProperty，在此，使用in应该比hasOwnProperty更确切 // if (this.hasOwnProperty(k)) { // fn.call...(context, this[k], k, this); // }; if (k in this) { fn.call(context, this[k], k, this);

9382 0

Axios 源码阅读 | 深入剖析 Axios 1.x 源码：探索 utils 通用工具库的奥秘

而在 Axios 的源码中，utils.js 文件扮演着至关重要的角色，它提供了一系列通用的工具函数，这些函数贯穿整个 Axios 库，为其他模块的正常运行提供了坚实的基础。...本文将深入剖析 axios-1.x/lib/utils.js 文件，详细解读其中每个函数的实现原理、设计思路以及重点逻辑。...object') { obj = [obj]; } if (isArray(obj)) { for (i = 0, l = obj.length; i fn.call...obj); const len = keys.length; let key; for (i = 0; i fn.call...三、结语本文深入剖析了 axios-1.x/lib/utils.js 文件中的各类工具函数，包括类型判断、数组和对象操作、字符串处理以及其他辅助函数。

2622 0

20171020

，其中this的指向不一样，下边通过call方法改变其指向，使其统一 obj.attachEvent("on"+evt,function(){ fn.call...}else if(obj.detachEvent){ obj.detachEvent("on"+evt,function(){ fn.call... 项目一项目二项目三 3.js...js/cancelBubble.js"> var ptage = document.getElementById("page

6302 0

点击加载更多

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

微信小程序函数防抖和函数节流

花式解说防抖函数debounce的实现

在 selenium IDE 插件中添加上传云端平台的功能

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

30·灵魂前端工程师养成-jQuery中的设计模式

JavaScript 函数式编程解析（上）

Javascript Array常见方法说明

JavaScript观察者模式

《你不知道的JavaScript》：this 绑定规则

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

call，apply，bind 的完全实现和理解

call、apply、bind 改变this方法总结

call、apply、bind的应用和区别

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

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

小程序bindtap传参_微信小程序bindtap

JavaScript很简单？那你理解forEach对吗？

Axios 源码阅读 | 深入剖析 Axios 1.x 源码：探索 utils 通用工具库的奥秘

20171020

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐