JavaScript全面了解作用域(基础、this、闭包、继承)之二

this这个东西,确实不好懂,很具有迷惑性,一不小心就错了。

this代表的是当前的作用域,知道当前的作用域,就可以确定了,但是这不是很容易确定。

第四部分:在全局中使用this

<script>
        var a = 2;
        function test(){
        
            var a = 1;
            document.writeln(a);
            document.writeln(this.a);
            
        }
        
        test();
        document.write(this.a);
    </script>

你认为结果是什么呢?1 1 2?但是结果是1 2 2

很有疑问吧?调用这个函数是在window中调用,所以说this就是window,window.a=2。不是this存在test()当中,this就是在test域。

第五部分:在对象中使用this

 <script>
        var name = "JIM";
        function Person(){
            this.name = "Mike";
            this.myname = getName;
        }
        
        function getName(){
            return this.name;
        }
        
        var person = new Person();
        document.write(person.myname());
    </script>

结果是Mike。this所在的作用域是在person当中,先搜索其中的属性,然后搜索原型,一直找到。

<script>
        var name = "JIM";
        function Person(){
            this.myname = getName;
        }
        Person.prototype.name="Mike";
        function getName(){
            return this.name;
        }
        
        var person = new Person();
        document.write(person.myname());
    </script>

这里一直搜索到Person.prototype.name

第五部分:this在继承当中使用

<script>
        var name = "JIM";
        function Person(){
            this.myname = getName;
			this.name="Mike";
        }
        function Son()
		{
			this.name="Sam";
		}
		Son.prototype=new Person();
        function getName(){
            return this.name;
        }
        
        var son = new Son();
        document.write(son.myname());
    </script>

结果是Sam,调用者是son,他先找自己的属性,然后是原型,最后的是原型的原型,一直找到。

第六部分:在回调函数中使用this

<script>
        var name = "JIM";
        function Person(){
			this.name="Mike";
        }
        function getName(){
            return this.name;
        }
		var person=new Person();
		document.writeln(getName.call(person));
        document.write(getName.call(this));
    </script>

结果是Mike JIM。第一个相当于person在调用,搜索他的作用域。第二个是window在调用,搜索window作用域。

第七部分:在闭包中使用this

下面的例子也许你会喜欢的,为什么呢?

<script>
        var name = "JIM";
        function Person(){
            this.name = "Mike";
            this.getName = function(){
                return function(){
                    return this.name;
                };
            };
        }
        
        var person = new Person();
        document.write(person.getName()());
    </script>

结果你以为是Mike,但是你错了,结果是JIM。

我来分析一下吧。this不会保存在作用域链的。我们把person.getName()分一下。

var temp=person.getName();
        document.write(temp());

person.getName()返回的是一个函数,他可以保存其他的作用域链,this不保存,第一步仅仅是返回了一个函数,他的结果是什么,还得继续看,调用的位置。这里是window,当然是JIM啦。

我们现在可以总结一下,关于this在函数当中的使用情况。谁调用他,this就指向谁,就搜索他的作用域。

这下子,就完全明了了,this到底怎么使用了,他指向的是谁。

JavaScript全面了解作用域链(基础、this、闭包、继承)之一

JavaScript全面了解作用域链(基础、this、闭包、继承)之二

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值