1.JS封装自己的call、apply和bind方法详解
2.å¦ä½ç解åçç»è¿ç¨jsä¸çcallåapply
3.求js高手解释,A.add和apply是什么意思,整个程序执行过程原理是什么 var A = {
4.如何理解和熟练运用js中的call及apply?
5.Js apply()使用详解
6.angularjs applyä»ä¹ä½ç¨
JS封装自己的call、apply和bind方法详解
在封装之前我们先来复习一下this指向。
所谓的红角鸮源码49专精源码this其实可以理解成一根指针:其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在
this的四种指向:当this所在的函数被普通调用时,指向window,如果当前是严格模式,则指向undefined
当this所在当函数被以obj.fn()形式调用时,指向obj
当call,apply加入后,this的指向被改变了
此时控制台并没有代码输出,因为bind会重新生成并且返回一个函数,这个函数的this指向第一个参数
function a() { console.log(this.name); } const b = { name: "segmentFault" } a.bind(b, 1, 2, 3)此时输出segmentFault
正式开始自己实现call :
在函数原型上定义自己的myCall方法:
Function.prototype.myCall = function (context, ...arg) { const fn = Symbol('临时属性') context[fn] = this context[fn](...arg) delete context[fn] }
四行代码实现了简单的call,思路如下:
为了简化,今天都不做类型判断和错误边际处理,只把原理讲清楚。
自己实现apply:
//实现自己的myApply Function.prototype.myApply = function (context, arg) { const fn = Symbol('临时属性') context[fn] = this context[fn](...arg) delete context[fn] } const obj2 = { a: 1 } test.myApply(obj2, [2, 3, 4])
同理,只是apply传递的第二个参数是数组,这里我们只需要在调用时,开源直播系统 源码将参数用...把数组展开即可
自己实现bind:
bind跟apply,call的本质区别,bind不会改变原函数的this指向,只会返回一个新的函数(我们想要的那个this指向),并且不会调用。但是apply和call会改变原函数的this指向并且直接调用
Function.prototype.myBind = function (objThis, ...params) { const thisFn = this; // 存储源函数以及上方的params(函数参数) // 对返回的函数 secondParams 二次传参 let fToBind = function (...secondParams) { console.log('secondParams',secondParams,...secondParams) const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用 const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上 return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果 }; fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBind return fToBind; // 返回拷贝的函数 };
学习需要循序渐进,建议根据本文顺序去封装一遍,是比较轻松的,当然bind还需要判断是否是new调用.
å¦ä½ç解åçç»è¿ç¨jsä¸çcallåapply
jsä¸çcallåapplyçç¡®æä¸ç¹å¤æï¼ä¸é¢è¯·å¬ææ ¢æ ¢éæ¥å 说applyç¨æ³ï¼
obj.apply(obj,args)ï¼ä¼ é两个åæ°ï¼obj代æ¿ä¼ å ¥ç±»ä¸çthis对象ï¼args代æ¿ä¼ å ¥ç±»ä¸çåæ°ï¼æ°ç»å½¢å¼ï¼
obj.call(obj,arg1,arg2)ï¼åapplyç¨æ³ç±»ä¼¼ï¼åªæ¯åé¢çä¼ å¼ä¸åï¼å¯ä»¥ç´æ¥åargumentsï¼æè ç´æ¥æç±»çææåæ°åè¿å»
çä¸é¢è¿ä¸ªä¾å
1.å 声æä¸ä¸ªPersonç±»ï¼èµäºåå§å¼nameï¼age
function Person(name,age) {this.name=name;
this.age=age;
}
2.声æä¸ä¸ªStudentç±»ï¼Studentç±»ä¸ä¼ éäºnameåageçåæ°ï¼å¹¶æ²¡æåå§åèµå¼ã
function Student(name,age,sex,height){
Person.apply(this,arguments);//Person.apply(this,[name,age]);
//ä¹å¯ä»¥è¿æ ·åPerson.call(this,arguments);//Person.call(this,name,age);
this.sex=sex;
this.height=height;
}
3.å®ä¾åä¸ä¸ªStudent类为p1ç对象
var p1 = new Student("xiaoming",,"boy","");console.log(p1);//Student { name: "xiaoming", age: , sex: "boy", height: ""}
çå°ç»æp1对象ä¹æænameï¼ageçåå§å¼ã
ææapplyå°Personç±»ä¸çåå§åå¤å¶ä¼ éå°äºStudentéé¢ã
求js高手解释,A.add和apply是什么意思,整个程序执行过程原理是什么 var A = {
为什么同一个问题 问2遍…………1 先说apply
apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
即:
Function.apply(obj,args)方法能接收两个参数
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function(args-->arguments)
就是B里的a=4,代替了A里的a=1,
数组[3],就是下面2中说的参数b
2 再来看程序
A.add=function(b){
console.log(this.a + b)
}
这句的意思是指 将结构体A内部的元素(this.a) 与add方法的参数b相加 并输出
输出结果在控制器里可以看到
3 所以三者结合成最后一段代码就是 4+3了
嘛 其实我觉得程序备注里说的挺明白的
我把程序改了下 多加了几个输出,应该会让你容易懂
如何理解和熟练运用js中的call及apply?
理解与熟练运用JS中的call和apply,需先明确它们存在的原因。在JS的面向对象编程中,我们常遇到如下的我的订单源码定义:
function cat(){ } cat.prototype={ food:"fish", say: function(){ alert("I love "+this.food); } } var blackCat = new cat; blackCat.say();
但若我们有一个对象,如whiteDog = { food:"bone"},而它未定义say方法,可借助call或apply,用blackCat的say方法操作whiteDog:
blackCat.say.call(whiteDog);
这表明call和apply是为了动态改变this而产生的。当一个对象缺少某个方法,而其他对象有,我们能通过call或apply使用其他对象的方法。
call和apply在JavaScript中广泛使用。例如,使用document.getElementsByTagName选择的DOM节点类似数组,但不支持如数组的push,pop等方法。我们可以通过:
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));
使得domNodes能应用数组的全部方法。
总结而言,call和apply的主要用途在于动态改变this,或使类似数组的DOM节点具备数组方法。实际应用中,灵活运用这两者能解决许多问题,如在不同对象间重用方法或操作DOM节点。
Js apply()使用详解
JavaScript的apply和call方法详解
在刚开始接触JavaScript的apply和call方法时,我感到十分困惑。通过在网络上查找相关文章和示例,代码源码在哪找我终于对这两个方法有了大致的理解。在这里,我将分享我的笔记,希望能对大家有所帮助。如果文章中存在错误或不明确之处,欢迎读者提出宝贵意见,共同进步。
本文主要解决以下问题:
1. apply和call的区别在哪里?
2. 什么情况下使用apply,什么情况下使用call?
3. apply的其他巧妙用法(一般在什么情况下可以使用apply)
首先,我查阅了关于apply和call的定义,并通过示例来解释它们的使用方法。
apply方法能够改变函数执行时的上下文,即能够劫持另一个对象的方法和属性。
apply方法的语法为:Function.apply(obj, args),其中obj是传递给Function类的this对象,args是一个数组,作为参数传给Function(args-->arguments)。
call方法与apply相似,但参数列表不同。
call方法的lottie ios源码解析语法为:Function.call(obj, param1, param2, ..., paramN),其中obj是传递给Function类的this对象,param1, param2, ... paramN是参数列表。
接下来,我们通过示例来解释call和apply的方法。
1. call方法示例:在Student函数中,可以将apply中的代码修改为:
Person.call(this, name, age);
这样就可以正确执行。
2. apply示例:分析代码:Person.apply(this, arguments);
在这个例子中,this对象代表的是Student,而arguments是一个数组,如[“qian”, “”, “一年级”];因此,它将使用Student对象执行Person类中的内容,如创建属性this.name等。
2. 什么情况下使用apply,什么情况下使用call(区别)?
在给对象提供参数的情况下,如果参数是数组形式,并且参数列表一致,如在apply示例中传递了数组arguments,就可以使用apply。如果参数列表不一致,如Person的参数列表为(age, name),而Student的参数列表为(name, age, grade),则应使用call,直接指定参数列表对应值的位置,如Person.call(this, age, name, grade)。
4. apply的其他巧妙用法
细心观察,可以发现使用apply时,第一个参数为对象(this),第二个参数为数组。
虽然在调用Person时不需要数组,但通过apply特性,可以将数组自动转换为参数列表。利用这一点,我们可以更高效地解决一些问题,如:
a. 实现获取数组中最大值的函数:Math.max.apply(null, array)
b. 实现获取数组中最小值的函数:Math.min.apply(null, array)
c. 实现两个数组合并的函数:Array.prototype.push.apply(arr1, arr2)
通常在目标函数只需要n个参数列表,而不是数组形式时,可以巧妙地使用apply解决这个问题。
总结
通过反复查阅资料和实践代码,我逐渐理解了apply方法的用法。这告诉我们,只要肯动脑筋、动手实践,就能掌握技术。在实现巧妙用法时,需要对编程有深入理解,积累和学习是提升关键。
angularjs applyä»ä¹ä½ç¨
æ åµé常å°ï¼å®é ä¸å ä¹æ们ææç代ç é½å å¨scope.apply()éé¢ï¼ång−clickï¼controllerçåå§åï¼httpçåè°å½æ°çãå¨è¿äºæ åµä¸ï¼æ们ä¸éè¦èªå·±è°ç¨ï¼å®é ä¸æ们ä¹ä¸è½èªå·±è°ç¨ï¼å¦åå¨apply()æ¹æ³éé¢åè°ç¨apply()æ¹æ³ä¼æåºé误ãå¦ææ们éè¦å¨ä¸ä¸ªæ°çæ§è¡åºåä¸è¿è¡ä»£ç æ¶æçæ£éè¦ç¨å°å®ï¼èä¸å½ä¸ä» å½è¿ä¸ªæ°çæ§è¡åºåä¸æ¯è¢«angular JSçåºçæ¹æ³å建çï¼è¿ä¸ªæ¶åæ们éè¦å°ä»£ç ç¨scope.apply()å èµ·æ¥ãä¸é¢ç¨ä¸ä¸ªä¾å解éï¼
å¤å¶ä»£ç 代ç å¦ä¸:
<div ng:app ng-controller="Ctrl">{ { message}}</div>
å¤å¶ä»£ç 代ç å¦ä¸:
functionCtrl($scope) {
$scope.message ="Waiting ms for update";
setTimeout(function () {
ãã$scope.message ="Timeout called!";
// AngularJS unaware of update to $scope
}, );
}
浅析Js中call,apply,bind
在JavaScript中,call、apply和bind都是用于改变函数执行时的上下文,即控制函数内部的“this”关键字指向。它们之间存在一定的联系和差异。
首先,让我们理解“指针”的概念。在JavaScript中,它类似于小学时老师为学生分配的座位号,座位号作为数字,代表了实际的学生。"call"就像直接喊号,this指向第一个参数,后续参数作为函数的输入;"apply"则类似,this同样指向第一个参数,但第二个参数是包含所有函数参数的数组。
而"bind"则不同,它不会立即执行,返回的是一个新的函数,这个函数在调用时会预先设定好this的指向。例如,Math.max方法的bind可以预先固定this为某个对象,方便后续调用时保持一致。
在函数的执行中,"call"和"apply"都涉及到了隐式地调用call方法来设置this。而在严格模式下,this的指向可能根据具体规则有所不同。而对于对象方法,函数在调用时会将this指向对象本身。
Function.prototype.bind的原理是通过闭包来保存固定的this值,使得函数在被多次调用时,其this始终保持一致。这种机制在处理回调函数或需要持久this值的场景中非常实用。
总的来说,call、apply和bind提供了解决函数上下文问题的工具,各有适用场景。通过理解它们的原理,可以更好地在实际编程中运用这些功能。
JS中call和apply的区别
在JavaScript中,`apply`和`call`都是用于改变方法调用时的对象上下文,但它们之间存在一些关键的区别。
首先,我们来定义一下`apply`和`call`:
`apply`:主要应用于将一个方法应用于另一个对象。它接收两个参数,一个是用于替换当前对象的新对象,另一个是一个数组或arguments对象,包含要传递给方法的参数。
`call`:也用于改变方法调用时的对象上下文。它的调用方式类似于`apply`,但接收的参数是一个数组或arguments对象,以及一个表示新对象的参数。
共同点:它们都能让方法的执行环境从原始环境转变为指定的新对象。
不同点:`apply`接收的参数必须是一个数组或arguments对象,如果只传一个参数,这个参数也需要被封装为数组。如果未提供参数,将导致TypeError。而`call`则允许直接以参数列表形式传递参数,无需转换为数组。
简而言之,`apply`和`call`的功能相似,区别在于它们接收参数的方式不同,`apply`需要参数数组,而`call`允许直接传入参数列表。
举例说明:使用`call`调用方法时,如`func.call(func1, var1, var2, var3)`,对应的`apply`写法为`func.apply(func1, [var1, var2, var3])`。可见,`call`是针对单一参数的调用,而`apply`则是针对参数数组的调用。