关于javascript中call(),apply(),bind()的介绍,初步

简介: 关于javascript中call(),apply(),bind()的介绍,初步

首先,你需要知道,这三个方法的作用是一样的,那就是改变this的指向

其次,对于call和apply方法,要知道,这两个方法并非是继承而来的方法

先来看看三者是如何使用的,最后在进行总结:


1.call的用法  函数名.call(指定的this指向,参数)

(注:参数必须一一列举出来,一一列举(num1,num2,num3,...)后面进行例子展示,先记住这个就好)

请先思考下边这个例子然后再看结果:


第一个 使用call方法实例:

(1),没用使用call方法之前:

 var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
       }
       function test(name,age){
            //该测试是在非严格模式下进行的
            console.log("修改前this的指向为=> " );
            console.log(this)
       }
       test();//在非严格模式下默认绑定为window对象,


在浏览器控制台的结果如下:

(2).使用后:((this.对象的参数可以不传),原因是对象的this已经知道,那么它的属性当然也就知道啦)

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
       }    
  
       function test(name,age){
            console.log(this.name + " " + this.objage);
 
            console.log("修改后this的指向为=> " );
 
            console.log(this)
       }
 
       test.call(obj,obj.name,obj.objage)

在浏览器控制台的结果如下:

第二个关于call方法的传参介绍,即为什么要一一列举出来

话不多说,上例子:

(1)不一一列举出来:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);//undefined
            console.log(age1 +""+ age2);//19,20undefined
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        let array = [19,20];
        test.call(obj,[19,20]);

(2)一一列举出来:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);//19
           console.log(age2);//20
            console.log(age1 +""+ age2);//1920
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.call(obj,19,20);

 

2.apply的用法  函数名.apply(指定的this指向,参数)

注:此处的参数为参数数组,(可以是Array的实例,也可以是arguments对象)

(1)没有使用apply方法的话与未使用call方法的结果一样,在这里就不在做重复解释


(2).使用apply方法

(1)传参为一一列举传入:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);
            console.log(age1 +""+ age2);
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.apply(obj,19,20);

结果如下:(报错了)

(2)以数组形式传递:

var obj = {
           name:"小李",
           objage:19,
           myfun:function(){
               console.log(this.name)
           }
        } 
        function test(age1,age2){
        console.log(age1);
           console.log(age2);
            console.log(age1 +""+ age2);
            console.log("修改后this的指向为=> " );
            console.log(this)
        }
        test.apply(obj,[19,20]);

结果如下:

 

总结:先对这两个方法进行总结,


首先 : 这两个方法没有什么很大的不同,不同点就在于他们的传参方式是不一样的。如果不给函数传递参数的情况下,使用哪个方法都无所谓。


其次:可以用他们来扩充函数赖以生存的作用域,也就是改变了函数的执行环境。

3.bind的用法  

这个方法会创建一个函数的实例,其this值会被绑定到传给bind()

相关文章
|
28天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
2月前
|
JavaScript 前端开发
JS高级—call(),apply(),bind()
【10月更文挑战第17天】call()`、`apply()`和`bind()`是 JavaScript 中非常重要的工具,它们为我们提供了灵活控制函数执行和`this`指向的能力。通过合理运用这些方法,可以实现更复杂的编程逻辑和功能,提升代码的质量和可维护性。你在实际开发中可以根据具体需求,选择合适的方法来满足业务需求,并不断探索它们的更多应用场景。
14 1
|
2月前
|
JavaScript 前端开发
js 中call()和apply()
js 中call()和apply()
31 1
|
3月前
|
自然语言处理 JavaScript 前端开发
JS中this的应用场景,再了解下apply、call和bind!
该文章深入探讨了JavaScript中`this`关键字的多种应用场景,并详细解释了`apply`、`call`和`bind`这三个函数方法的使用技巧和差异。
|
4月前
|
前端开发 JavaScript 开发者
揭秘JavaScript魔法三剑客:call、apply、bind,解锁函数新世界,你的前端之路因它们而精彩!
【8月更文挑战第23天】在 JavaScript 的世界里,`call`、`apply` 和 `bind` 这三个方法常常让新手感到困惑。它们都能改变函数执行时的上下文(即 `this` 的指向),但各有特点:`call` 接受一系列参数并直接调用函数;`apply` 则接收一个参数数组,在处理不确定数量的参数时特别有用;而 `bind` 不会立即执行函数,而是创建一个新版本的函数,其 `this` 上下文已被永久绑定。理解这三个方法能帮助开发者更好地运用函数式编程技巧,提升代码灵活性和可维护性。
41 0
|
3月前
|
JavaScript 前端开发
this指向的几种情况以及js简单实现call、apply、bind___六卿
本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。
20 0
this指向的几种情况以及js简单实现call、apply、bind___六卿
|
3月前
|
JavaScript
js的this与call,apply,bind
js的this与call,apply,bind
|
5月前
|
JavaScript
js【详解】call()、apply()、bind()方法
js【详解】call()、apply()、bind()方法
43 6
|
6月前
|
JavaScript 前端开发 开发者
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
【JavaScript】JavaScript中call、apply与bind的区别:进阶特性与应用场景
68 0
|
7月前
|
前端开发 JavaScript
【Web 前端】 js中call、apply、bind有什么区别?
【4月更文挑战第22天】【Web 前端】 js中call、apply、bind有什么区别?
【Web 前端】 js中call、apply、bind有什么区别?