this指向的几种情况以及js简单实现call、apply、bind___六卿

简介: 本文讨论了JavaScript中`this`的指向规则,并提供了`call`、`apply`和`bind`方法的简单实现,用于改变函数的`this`指向。

this指向的几种情况

普通Function调用的this指向

           myFun()
           function myFun(){
   
               console.log(this) //window
           }

对象中方法中this指向

        let obj = {
   
            name:'zjq',
            age:"18",
            habby(){
   
                console.log(this.name,this)
            }
        }
        obj.habby() //指向obj

构造函数中的this指向

        function A(name, age){
   
                this.name= name;
                this.age = age;
                this.habby = function(){
   
                    console.log(this.name,this.age,this)  //指向实例化之后的对象
                }
            }
           let Ac = new A('zjq',18)
            Ac.habby()

箭头函数的this指向

        const A = () => {
   
            console.log(this)
        }
        let obj = {
   
            name: 'zjq',
            age: "18",
            A,
            B(){
   
                console.log(this,'B')
            }
        }
        console.log(obj.A())  //window
        console.log(obj.B())  //obj

普通函数我们都知道是谁调用指向谁,是在调用的时候确定的,但是箭头函数指向外层作用域,但是obj身上没有this这个变量,直到最外层window,跟着作用域往上找了
在这里插入图片描述
在这里插入图片描述

简单实现改变this指向的三种方法

call

        Function.prototype.mySelfCall = function (obj, ...arrList) {
   
            obj = obj ? Object(obj) : window
            let that = this; //前边的函数
            obj.fn = that;
            obj.fn(...arrList)
            delete obj.fn
        }

apply

        Function.prototype.mySelfApply = function (obj, arrList) {
   
            obj = obj ? Object(obj) : window
            let that = this; //前边的函数
            obj.fn = that;
            obj.fn(...arrList)
            delete obj.fn
        }

bind


        Function.prototype.mySelfBind = function (obj, ...arrList) {
   
            obj = obj ? Object(obj) : window
            let that = this; //前边的函数
            obj.fn = that;
            return () => {
    obj.fn.mySelfCall(obj, ...arrList); delete obj.fn }
        }

测试

        function A(name, age) {
   
            this.name = name;
            this.age = age;
            this.habby = function (...num) {
   
                console.log(this.name, this.age, this, ...num)  //指向实例化之后的对象
            }
        }
        let Ac = new A('zjq', 18)
        Ac.habby.mySelfCall({
    name: 111, age: 222 }, 1, 2, 3, 4)
        Ac.habby.mySelfApply({
    name: 333, age: 444 }, [1, 2, 3, 4, 5, 6, 7, 8])
        Ac.habby.mySelfBind({
    name: 555, age: 666 }, 1, 2, 3, 4)()

在这里插入图片描述

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