0
点赞
收藏
分享

微信扫一扫

call、apply、bind 改变this的指向 笔记

非衣所思 2022-02-14 阅读 91

目录

​​​​​​​​​​​​​​​​1.call、apply、bind的基本概念

call、apply、bind的区别

2.call、apply、bind的实际应用

继承:子类可以使用父类的方法


  1. call、apply、bind的基本概念

  • call、apply、bind的区别

        call 的返回值是函数的返回值也就是call可以调用函数,call会改变this的指向,其参数,第一个参数是改变this的的对象,后面的值是传递给函数的参数

        applay与call一样但是唯一不同的是后面传递的值是以数组的形式进行传递

        bind 与 call一样 但是唯一不同的是 返回值返回的是和原函数一致但是this指向不同也就是说返回函数,但不调用函数,可以用变量接收多次调用

     // call,apply,bind
        // call是一个方法,是函数的方法
        function fun() {
            // console.log('Hello World');
            console.log(this.name);
        }

        let cat = {
            name: '喵喵'
        }

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

        // 1、call可以调用函数,call可以改变函数中this的指向
        fun.call(cat); //喵喵

        dog.sayName(); //我是旺财

        dog.sayName.call(cat); //我是喵喵  call改变了this指向

        dog.eat('骨头', '和肉'); //旺财 喜欢吃骨头和肉


        //第一个值为要改变this的参数,后面的值为要改变的参数
        dog.eat.call(cat, '鱼', '肉') //喵喵 喜欢吃鱼肉

        // 和call一样唯一不同的是 apply的值是数组
        dog.eat.apply(cat, ['鱼', '肉']) //喵喵 喜欢吃鱼肉

        // 和call一样 唯一不同的是call会直接调用函数 bind会作为一个返回值 返回函数可以多次调用
        let fun1 = dog.eat.bind(cat, '鱼', '肉') //喵喵 喜欢吃鱼肉
        fun1();
  1. call、apply、bind的实际应用

  • 继承:子类可以使用父类的方法

        call的好处是可以实现多重继承

        // 继承:子类可以使父类方法

        // 创建一个构造函数
        function Animal() {
            // 方法
            //this指向小cat 
            this.eat = function () {
                console.log('吃东西');
            }

        }

        // let animal = new animal();
        // animal.eat();//吃东西

        function Cat() {
            //this指向小cat 
            Animal.call(this);
        }
        let cat = new Cat();
        cat.eat(); //吃东西

        

举报

相关推荐

0 条评论