前端基础:call、apply、bind的基本概念

一、call

call是一个方法,是函数的方法

function fun() {
  console.log('hello, guoyu')
}
// call 可以调用函数
fun.call() // 输出  hello, guoyu
function fun() {
  console.log(this.name)
}

let cat = {
  name: '喵喵'
}
// 上面两段代码,一点关系没有
// 但我们可以通过一个call就可以建立起他们的关系
// call可以调用函数,call可以改变函数中的this
// 让函数中的this指向这个cat对象,本身函数中的this是指向window/global的
fun.call(cat) // 喵喵

看下面例子

let dog = {
  name: '旺财',
  sayName: function() {
    console.log(`我是${this.name}`)
  }
}

let cat = {
  name: '喵喵'
}
dog.sayName() // 我是旺财
function fun() {
  console.log(this.name)
}

let dog = {
  name: '旺财',
  sayName: function() {
    console.log(`我是${this.name}`)
  }
}

let cat = {
  name: '喵喵'
}
// dog.sayName() // 我是旺财
// 如果我想实现喵喵怎么办,可是cat没有sayName这个方法啊
// 可以使用call借用,让猫去用狗的方法
dog.sayName.call(cat) // 我是喵喵

上面都是简单的,如果再难点呢,比如,狗子里再加个eat方法,带有其他参数。

let dog = {
  name: '旺财',
  sayName: function() {
    console.log(`我是${this.name}`)
  },
  eat: function(food1, food2) {
    console.log(`${this.name}喜欢吃${food1}、${food2}`)
  }
}

let cat = {
  name: '喵喵'
}

dog.eat('骨头', '屎') //我喜欢吃骨头、屎
// 如果猫想用这个方法呢, call的用法
dog.eat.call(cat, '鱼', '老鼠') // 我喜欢吃鱼、老鼠

二、apply

apply和call的用法几乎是一样的,call第二个参数开始是参数列表,apply只是把这些参数整到一个数组中

let dog = {
  name: '旺财',
  sayName: function() {
    console.log(`我是${this.name}`)
  },
  eat: function(food1, food2) {
    console.log(`${this.name}喜欢吃${food1}、${food2}`)
  }
}

let cat = {
  name: '喵喵'
}

dog.eat('骨头', '屎') //我喜欢吃骨头、屎
// 如果猫想用这个方法呢, call的用法
dog.eat.call(cat, '鱼', '老鼠') // 我喜欢吃鱼、老鼠
// 如果是apply,参数改成[数组]方式即可
dog.eat.apply(cat, ['鱼', '老鼠'])

三、bind

bind和call有点不同,call会调用比如前面的eat函数,bind不会,bind返回的是一个函数,还需要再手动调用一次 。

let dog = {
  name: '旺财',
  sayName: function() {
    console.log(`我是${this.name}`)
  },
  eat: function(food1, food2) {
    console.log(`${this.name}喜欢吃${food1}、${food2}`)
  }
}

let cat = {
  name: '喵喵'
}

dog.eat('骨头', '屎') //我喜欢吃骨头、屎
// 如果猫想用这个方法呢, call的用法
dog.eat.call(cat, '鱼', '老鼠') // 我喜欢吃鱼、老鼠
// 如果是apply,参数改成[数组]方式即可
dog.eat.apply(cat, ['鱼', '老鼠'])

const fun = dog.eat.bind(cat, '鱼', '老鼠')
fun()

前端基础:call、apply、bind的基本概念_第1张图片

 四、call、apply、bind的实际应用

实现继承

// 继承:子类可以使用父类的方法
function Animal() {
  this.eat = function() {
    console.log('吃东西')
  }
}

let ani = new Animal()
ani.eat() // 吃东西

// 下面的代码和上面毫无关系,并没有形成继承关系
function Cat () { }
let cat = new Cat()
cat.eat() // 肯定会报错

前端基础:call、apply、bind的基本概念_第2张图片

 看看使用call方式实现继承

// 继承:子类可以使用父类的方法
function Animal() {
  // 自然而然这里的this也是指向小cat了----2
  // 那么this.eat 就是小cat.eat,那么小cat就有这个eat方法了
  this.eat = function() {
    console.log('吃东西')
  }
}

let ani = new Animal()
ani.eat() // 吃东西

// 如何才能让Cat继承Animal呢
function Cat () {
  // Animal 是构造函数,它也是函数,就可以直接调call,就把this传进去
  // 已经实现了继承
  // 这里的this指向小cat----1
  Animal.call(this)
}
let cat = new Cat()
cat.eat()

前端基础:call、apply、bind的基本概念_第3张图片

 而且call还可以实现多重继承

// 继承:子类可以使用父类的方法
function Animal() {
  // 自然而然这里的this也是指向小cat了----2
  // 那么this.eat 就是小cat.eat,那么小cat就有这个eat方法了
  this.eat = function() {
    console.log('吃东西')
  }
}

function Bird() {
  this.fly = function() {
    console.log('I can fly')
  }
}

let ani = new Animal()

// 如何才能让Cat继承Animal呢
function Cat () {
  // Animal 是构造函数,它也是函数,就可以直接调call,就把this传进去
  // 已经实现了继承
  // 这里的this指向小cat----1
  Animal.call(this)
  Bird.call(this)
}
let cat = new Cat()
cat.eat()
cat.fly()

你可能感兴趣的:(2022面试,前端,大数据)