7、call、apply、bind方法

简介: 7、call、apply、bind方法

1、call、apply、bind


  • 都是函数的方法,改变函数内部this的指向


函数内部 this的指向
1、谁调用方法 this指向谁
2、构造函数中的this 指向new创建的对象
3、全局函数的this 指向全局对象window
4、箭头函数的this 指向上下文的this



2、call方法(改变this的指向)

    // 1、指向window
    function fun() { console.log(this); }
    fun();
    // 2、指向person 
    let person = { name: "jasmine" };
    fun.call(person);
    // 3、指向person 
    let user = {
      name: "jasmine_qiqi",
      getName() { console.log(this.name); }
    }
    user.getName.call(person);


3、call方法(实现多种继承)

    // ES6(extends)
    // ES5(原型链)
    // 4、利用call实现继承(多重)
    function Person5() {
      this.login = function () {
        console.log("登陆功能");
      }
    }
    function User() {
      this.crudContent = function () {
        console.log("增删改查信息");
      }
    }
    function Admin() {
      // call:继承
      Person5.call(this);
      User.call(this);
    }
    var admin = new Admin();
    admin.login();        // 输出结果:登陆功能
    admin.crudContent();    // 输出结果:增删改查信息

4、call、apply、bind方法(实现多种继承)

    // 4、利用call实现继承(多重)
    function Person5() {
      this.name = "jasmine",
        this.login = function () {
          console.log("登陆功能");
        }
    }
    function User() {
      this.crudContent = function () {
        console.log("增删改查信息");
      }
    }
    function Admin() {
      // call:继承
      Person5.call(this);
      User.call(this);
      this.getName = function (age) {
        console.log(`我的姓名:${this.name},我的年龄${age}`);
      }
    }
    var admin = new Admin();
    admin.login();              // 输出结果:登陆功能
    admin.crudContent();          // 输出结果:增删改查信息
    let person6 = new Person5();
    admin.getName.call(person6, 18);    // 我的姓名:jasmine,我的年龄18
    admin.getName.apply(person6, [18]);   // 我的姓名:jasmine,我的年龄18
    admin.getName.bind(person6, 18)();  // 我的姓名:jasmine,我的年龄18

5、总结


call 会调用函数,通过参数列表依次传参
apply 会调用函数,通过数组传参
bind 不会调用函数,将新的重新绑定this的函数作为返回值,通过参数列表传参


相关文章
|
24天前
|
前端开发 JavaScript
比较一下apply/call/bind ?
本文首发于微信公众号“前端徐徐”,详细介绍了 JavaScript 中 `apply`、`call` 和 `bind` 方法的概念、使用场景及手动实现。主要内容包括: - **apply**:使用数组作为参数调用函数,并指定 `this`。 - **call**:直接传递参数调用函数,并指定 `this`。 - **bind**:返回一个绑定了 `this` 和部分参数的新函数。 文章还对比了这三个方法的区别,并提供了手动实现的代码示例。
14 2
|
5月前
|
JavaScript 前端开发
call和apply的区别
call和apply的区别
|
3月前
|
JavaScript 前端开发 测试技术
手写call , apply , bind 方法的实现
本文通过实例讲解了JavaScript中`call`、`apply`及`bind`方法的用途与实现。以`call`为例,展示了如何改变函数内的`this`指向,并立即执行该函数。通过在`Function.prototype`上定义`myCall`,利用`Symbol`确保新增属性的唯一性,从而避免命名冲突。接着介绍了如何处理不定数量的参数传递,最终实现了自定义的`myCall`方法。随后简述了`apply`与`call`的区别,并展示了其实现方式,主要在于参数传递形式的不同。最后,通过`bind`方法创建了一个返回新函数的例子,该新函数具有固定的`this`上下文,同时支持分批参数传递。
29 2
手写call , apply , bind 方法的实现
|
6月前
call\apply\bind详解
call\apply\bind详解
32 0
bind、call、apply 区别
bind、call、apply 区别
76 0
call、apply、bind笔记
call、apply、bind笔记
62 0
apply、bind和call
apply、bind和call
87 0
|
JavaScript 前端开发
一文搞定this、apply、call、bind
一文搞定this、apply、call、bind