this 的指向

1,在Vue所有的生命周期钩子方法(如created,mounted, updated以及destroyed)里使用this,this指向调用它的Vue实例,即(new Vue)。

new Vue({
        el: "#app",
        data: {
            list: ["banner", "orange", "apple"]
        },
        methods: {
            on: function() {
            alert(this.list);
            this.list.push("Potato")
        }
})

什么是vue实例:这里的this指向的是new Vue这个对象。new Vue也可以写成var C=new Vue({}).所以这里的this指向的是C。

2,箭头函数中的this

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象, 定义它的时候,可能环境是window; 箭头函数可以方便地让我们在 setTimeout ,setInterval中方便的使用this。

3,js的this指向

① 通过函数名()直接调用:this指向window

        function func(){
            console.log(this);
        }
        func(); // this--->window

② 通过对象.函数名()调用的:this指向这个对象

        function func(){
            console.log(this);
        }
        // 狭义对象
        var obj = {
            name:"obj",
            func1 :func
        };
        obj.func1(); // this--->obj
        
        // 广义对象
        document.getElementById("div").onclick = function(){
            this.style.backgroundColor = "red";
        }; // this--->div

③ 函数作为数组的一个元素,通过数组下标调用的:this指向这个数组

        function func(){
            console.log(this);
        }
        var arr = [func,1,2,3];
        arr[0]();  // this--->arr

④函数作为window内置函数的回调函数调用:this指向window

        function func(){
            console.log(this);
        }
        setTimeout(func,1000);// this--->window
        //setInterval(func,1000);

⑤ 函数作为构造函数,用new关键字调用时:this指向新new出的对象

        function func(){
            console.log(this);
        }
        var obj = new func(); //this--->new出的新obj

发表评论

电子邮件地址不会被公开。 必填项已用*标注