Javascript作用域之this指向

已被阅读 1331 次 | 文章分类:日常随笔 | 2018-10-28 23:15

本节简单了解一下javascript作用域,以及面试中经常会涉及的this指向问题

一:作用域概念

1.javascript作用域和执行环境是一个道理;作用域无非两种:全局作用域和局部作用域,在这里我理解为window对象作用域和函数作用域 如下图代码 包括一个全局作用域和两个函数作用域;作用域链的关系为window包含fn1,fn2,fn1包含fn2

/net/upload/image/20181028/6367633937385060788207181.png

上面代码的输出结果是这样的,可以看到最内层执行环境作用域,可以访问到他外层的所有对象

                                            
// name: xb
// name1: xb1
// name2: xb2
             
                                            
                                        

然后如下看到另一种输出结果

                                            
var name="xb"
function fn1(){
    var name1="xb1"
    function fn2(){
    var name2="xb2"
    }
    fn2();
}
fn1();
console.log("name:",name);
console.log("name1:",name1);  //name1 is not defined
console.log("name2:",name2);
                                            
                                        

由此可见 函数外部无法访问内部执行环境的对象,这样函数作用域起到封装对象的作用,避免污染变量

2. 那么我们的全局作用域具体点给怎么称呼呢,看下面代码以及输出

                                            
var a="xb";
function fn1(){}
console.log("window",window);
                                            
                                        

/net/upload/image/20181028/6367634134747185445153630.png

所谓的全局变量和函数等对象其实都是window对象的一个属性,所以全局作用域其实就是window对象内部。 所以必有下面结果

                                            
var a="xb";
console.log(a);         // "xb"
console.log(window.a);  // "xb"
                                            
                                        

二:this指向解释

首先this是有作用域范围的,而且this必定指向一个对象,例如实例对象或者作用域对象

1. 在全局作用域内,this指向window对象

                                            
var a="xb";
console.log(this);      // window对象 
console.log(this.a);    // "xb"
                                            
                                        

2. 普通函数作用域内,this仍然指向window对象

                                            
var a="xb";
function fn1(){
    console.log("fn1-this",this);  // window对象 
}
fn1();
                                            
                                        

3. 构造函数作用域内,this指向通过该构造函数创建的实例对象

                                            
var a="xb";
function fn1(_name){
    this.name=_name;
    console.log("fn1-this",this);    // fn1ob对象
}
var fn1obj=new fn1("xiaobai");      
console.log("this",this);           // window对象 
                                            
                                        

4. 普通函数在任何时候,内部的this都指向window对象

                                            
function fn1(_name){
    this.name=_name;
    console.log("this1",this);      // pop对象
    function fn2(){
        console.log("this2",this);  // window对象,构造函数内的普通函数内部的this指向window
    }
    fn2();
}
console.log("this0",this);         // window对象
var xb=new fn1();
                                            
                                        

QQ:3410192267 | 技术支持 微信:popstarqqsmall

Copyright ©2017 xiaobaigis.com . 版权所有 鲁ICP备17027716号