【修真院web小课堂】简述this的指向

这个指向
1.纯粹的作为函数调用:全局函数中,这个指向窗口

        函数a(){
        console.log(this);
        }
        a();
2.作为对象方法的调用:当函数被作为某个对象的方法调用时,这就是那个对象


        var name ='火影';
        var person2 = {
            name:'水影',
            sayName:function(){
            console.log(this.name);
             }
         };
    var sayNameWin = person2.sayName;
    person2.sayName(); //水影
    sayNameWin(); //火影作为window的方法被调用的
3.作为构造函数调用:this指向新对象


        function Person3(name){
        this.name = name;
        的console.log(本);
        }
    var person3 = new Person3('张飒');
    的console.log(person3.name); //张飒
4.apply,call调用:this指向改变后的调用这个函数的对象
        var person4 = {
        name:'人才'
        };
        函数fn(){
        console.log(this); // Object {name:“人才”}
        console.log(this.name); //人才
        }

        fn.apply(person4);



常见问题:

1.setTimeout,setInterval的中的这是指向哪里?

“javascript高级程序设计”中写到:“超时调用的代码都是在全局执行域中执行的”.setTimeout / setInterval执行的时候,这个默认指向窗口对象,除非手动改变这个指向。

2.如何改变这种的指向?

可以使用电话或者申请的方法

3,本的本质是什么?

函数调用首先需要从函数的调用开始讲起.JS(ES5)里面有三种函数调用形式:func(p1,p2) 
obj.child.method(p1,p2)
func.call(context,p1,p2)/ /先不讲apply
一般,初学者都知道前两种形式,而且认为前两种形式「优于」第三种形式。从看到这篇文章起,你一定要记住,第三种调用形式,func.call(undefined,p1 ),func.call(context,p1,p2)
其他两种都是语法糖,可以等价地变为call形式:func(p1,p2)
,p2)


obj.child.method(p1,p2)等价于
obj.child.method.call(obj.child,p1,p2)
请记下来。(我们称此代码为「转换代码」,方便下文引用)至此我们的函数调用只有一种形式:func.call(context,p1,p2)
这样,这就就好解释了this,就是上面代码中的context。就这么简单.this是你call一个函数时传的context,由于你从来不用道调用形式的函数调用,所以你一直不知道。先看func(p1,p2)中 这如何确定:当你写下面代码时函数func(){
  的console.log(本)
}


FUNC()
等价于函数func(){
  的console.log(本)
}


func.call(undefined)//可以
简写为func.call()按理说打印出来的这个应该就是undefined了吧,但是浏览器里有一条规则:如果你传的上下文不是一个对象,那么window对象就是default (这条规则在Node.js和strict模式下会稍微不一样,不过那不是我们现在要讨论的)因此上面的打印结果是window。如果你希望这里的这不是window,很简单:func .call(obj)//那么里面的这个就是obj对象了
再看obj.child.method(p1,p2)的这个如何确定var obj = {
  foo:function(){
    console.log(this)
  }
}
obj .foo() 
按照「转换代码」,我们将obj.foo()转换为obj.foo.call(obj)

好了,这就是obj。搞定。

总结这就是你call一个函数时,传入的上下文。如果你的函数调用形式不是call形式,请按照「转换代码」将其转换为call形式。



PPT:HTTPS://it-xzy.github.io/WEB-NEW/2018-6-23-C-js6-tds.html
腾讯视频:HTTPS://v.qq.com/x/page/y0699ba8g53。 HTML

猜你喜欢

转载自blog.csdn.net/tianxintiandisheng/article/details/80789603
今日推荐