this与作用域的理论及应用

最新推荐文章于 2022-11-17 11:19:17 发布

熙翎

最新推荐文章于 2022-11-17 11:19:17 发布

阅读量376

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/qq_42853570/article/details/115857830

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、this关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
重点：谁调用这个函数或方法,this关键字就指向谁。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 上是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

注：严格模式目的—>Javascript更合理、更安全、更严谨　
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
　　- 消除代码运行的一些不安全之处，保证代码运行的安全；
　　- 提高编译器效率，增加运行速度；
　　- 为未来新版本的Javascript做好铺垫。

1、在方法中

普通模式：

var person{
      firstName:"吃",      
      lastName:"西瓜",
fullName : function() {  
return this.firstName + " " + this.lastName;
}
}

本方法中，this表示person对象
运行路径：https://www.runoob.com/try/try.php?filename=tryjs_this_method
换另一个方法：

var personA={
        name:"xl",
        showName:function(){
            console.log(this.name);
        }
    }
   var personB={
        name:"XL",
        sayName:personA.showName
    }
    personB.sayName();  
//输出 XL

虽然showName方法是在personA这个对象中定义，但是调用的时候却是在personB这个对象中调用，因此this对象指向personB，也就是指向上级对象

2、单独使用

var x = this;
this指向window这个全局对象，在浏览器中打印为 [object Window]
运行路径：https://www.runoob.com/try/try.php?filename=tryjs_this

注意：在严格模式下单独使用，this也是指向window
https://www.runoob.com/try/try.php?filename=tryjs_this_alone

3、函数中使用

在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:

function myFunction() {  
return this;
}
运行路径：https://www.runoob.com/try/try.php?filename=tryjs_this_function

注意：

（1）在严格模式下的，函数是没有绑定到 this，this为undefined

示例：

"use strict";
function myFunction() { 
     return this;
}

（2）构建函数中

   function  Person(name){
        this.name=name;
    }
    var personA=Person("xl");
    console.log(personA.name); // 输出  undefined
    console.log(window.name);//输出  xl
    //上面代码没有进行new操作，相当于window对象调用Person("xl")方法，那么this指向window对象，并进行赋值操作window.name="xl".
    var personB=new Person("xl");
    console.log(personB.name);// 输出 xl

（3)箭头函数中

es6里面this指向固定化，始终指向外部对象，因为箭头函数没有this,因此它自身不能进行new实例化,同时也不能使用call, apply, bind等方法来改变this的指向

   function Timer() {
        this.seconds = 0;
        setInterval( () => this.seconds ++, 100);//每100ms执行
    } 
    
    var timer = new Timer();
    
    setTimeout( () => console.log(timer.seconds), 300);//第300ms打印
    // 3
   // 在构造函数内部的setInterval()内的回调函数，this始终指向实例化的对象，并获取实例化对象的

seconds的属性,每1s这个属性的值都会增加1。否则最后在3s后执行setTimeOut()函数执行后输出的是0

(4)Eval函数

该函数执行的时候，this绑定到当前作用域的对象上中

   var name="XL";
    var person={
        name:"xl",
        showName:function(){
            eval("console.log(this.name)");
        }
    }
    
    person.showName();  //输出  "xl"
    
    var a=person.showName;
    a();  //输出  "XL"

4、事件中

this 指向了接收事件的 HTML 元素：

<button onclick="this.style.display='none'"> 
点我后我就消失了 
</button>
运行路径：https://www.runoob.com/try/try.php?filename=tryjs_this_event

其他需要注意点：
（1）Function.prototype.bind()方法
示例

var name="XL";
   function Person(name){
       this.name=name;
       this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            },50)
        }
    }
   var person=new Person("xl");
    person.sayName()  //输出  “my name is XL”;
 //这里的setTimeout()定时函数,相当于window.setTimeout(),由window这个全局对象对调用,因此this的指向为window, 则this.name则为XL

加上bind()方法：

var name="XL";
   function Person(name){
       this.name=name;
       this.sayName=function(){
            setTimeout(function(){
                console.log("my name is "+this.name);
            }.bind(this),50) 
 //注意这个地方使用的bind()方法，绑定setTimeout里面的匿名函数的this一直指向Person对象
        }
    }
   var person=new Person("xl");
    person.sayName(); //输出 “my name is xl”;

5、显式函数绑定

apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。
示例

var person1 = {  
fullName: function() {    
return this.firstName + " " + this.lastName;   
}
}
var person2 = {  
firstName:"John",   
lastName: "Doe",
}
person1.fullName.call(person2);  // 返回 "John Doe"
本示例中，this原指向person1 ，call()把this绑定对方指向person2
运行环境：https://www.runoob.com/try/try.php?filename=tryjs_this_call

二、作用域

1.什么是作用域

作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性

function outFun2() {
    var inVariable = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

上面的例子,变量 inVariable 在全局作用域没有声明，所以在全局作用域下取值会报错.
我们可以这样理解：作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。
ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。

2.全局作用域和函数作用域

全局作用域
在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：
• 最外层函数和在最外层函数外面定义的变量拥有全局作用域

var outVariable = "我是最外层变量"; //最外层变量
function outFun() { //最外层函数
    var inVariable = "内层变量";
    function innerFun() { //内层函数
        console.log(inVariable);
    }
    innerFun();
}
console.log(outVariable); //我是最外层变量
outFun(); //内层变量
console.log(inVariable); //inVariable is not defined
innerFun(); //innerFun is not defined
• 所有末定义直接赋值的变量自动声明为拥有全局作用域
function outFun2() {
    variable = "未定义直接赋值的变量";
    var inVariable2 = "内层变量2";
}
outFun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(variable); //未定义直接赋值的变量
console.log(inVariable2); //inVariable2 is not defined

• 所有 window 对象的属性拥有全局作用域
一般情况下，window 对象的内置属性都拥有全局作用域
全局作用域有个弊端：如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样就会污染全局命名空间, 容易引起命名冲突。这就是为何 jQuery、Zepto 等库的源码，所有的代码都会放在(function(){…})()中。因为放在里面的所有变量，都不会被外泄和暴露，不会污染到外面，不会对其他的库或者 JS 脚本造成影响。这是函数作用域的一个体现。
函数作用域
函数作用域,是指声明在函数内部的变量，和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部

function doSomething(){
    var blogName="函数作用域";
    function innerSay(){
        alert(blogName);
    }
    innerSay();
}
alert(blogName); //脚本错误
innerSay(); //脚本错误

作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行
值得注意的是：块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。

if (true) {
    // 'if' 条件语句块不会创建一个新的作用域
    var name = 'Jack'; // name 依然在全局作用域中
}
console.log(name); // logs 'Jack'

块级作用域
块级作用域可通过新增命令 let 和 const 声明，所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：

在一个函数内部
在一个代码块（由一对花括号包裹）内部

function getValue(condition) {
if (condition) {
let value = "blue";
return value;
} else {
// value 在此处不可用
return null;
}
// value 在此处不可用
}

声明提升
函数声明和变量声明总是会被移动到它们所在的作用域的顶部

function testOrder(arg) {
    console.log(arg); // arg是形参，不会被重新定义
    console.log(a); // 因为函数声明比变量声明优先级高，所以这里a是函数
    var arg = 'hello'; // var arg;变量声明被忽略， arg = 'hello'被执行
    var a = 10; // var a;被忽视; a = 10被执行，a变成number
    function a() {
        console.log('fun');
    } // 被提升到作用域顶部
    console.log(a); // 输出10
    console.log(arg); // 输出hello
}; 
testOrder('hi');
/* 输出：
hi 
function a() {
        console.log('fun');
    }
10 
hello 
*/

熙翎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
this与作用域的理论及应用

一、this关键字面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。重点：谁调用这个函数或方法,this关键字就指向谁。• 在方法中，this 表示该方法所属的对象。• 如果单独使用，this 表示全局对象。• 在函数中，this 表示全局对象。• 在函数中，在严格模式下，this 上是未定义的(undefined)。• 在事件中，this 表示接收事件的元素。• 类似 call() 和 apply()
复制链接

扫一扫