我在乐字节学习前端的第六天-JavaScript变量提升和this的指向问题

90 阅读4分钟

1.1-JavaScript 变量提升

JavaScript 中,函数及变量的声明都将被提升到函数的最顶部。

JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明。

以下两个实例将获得相同的结果:

例 1
x = 5; // 变量 x 设置为 5​elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x;                     // 在元素中显示 x​var x; // 声明 x  
例 2
var x; // 声明 xx = 5; // 变量 x 设置为 5​elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x;                     // 在元素中显示 x

要理解以上实例就需要理解 "hoisting(变量提升)"。

变量提升:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部。

1.2-JavaScript 初始化不会提升

JavaScript 只有声明的变量会提升,初始化的不会。

以下两个实例结果结果不相同:

例 1
var x = 5; // 初始化 xvar y = 7; // 初始化 y​elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y;           // 显示 xy
例 2
var x = 5; // 初始化 x​elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y;           // 显示 xy​var y = 7; // 初始化 y

例 2 的 y 输出了 undefined,这是因为变量声明 (var y) 提升了,但是初始化(y = 7) 并不会提升,所以 y 变量是一个未定义的变量。

例 2 类似以下代码:

var x = 5; // 初始化 xvar y;     // 声明 y​elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y;           // 显示 xyy = 7;    // 设置 y7

1.3-在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 变量提升。

如果程序员不能很好的理解变量提升,他们写的程序就容易出现一些问题。

为了避免这些问题,通常我们在每个作用域开始前声明这些变量,这也是正常的 JavaScript 解析步骤,易于我们理解。

JavaScript 严格模式(strict mode)不允许使用未声明的变量。 在下一个章节中我们将会学习到 "严格模式(strict mode)"

2.1-JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

  • 在方法中,this 表示该方法所属的对象。

  • 如果单独使用,this 表示全局对象。

  • 在函数中,this 表示全局对象。

  • 在函数中,在严格模式下,this 是未定义的(undefined)。

  • 在事件中,this 表示接收事件的元素。

  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

var person = {     firstName: "John",     lastName : "Doe",    id: 5566,    fullName : function() {    return this.firstName + " " + this.lastName;    }​};

2.2-方法中的 this

在对象方法中, this 指向调用它所在方法的对象。

在上面一个实例中,this 表示 person 对象。

fullName 方法所属的对象就是 person。

fullName : function() {   return this.firstName + " " + this.lastName;}

2.3-单独使用 this

单独使用 this,则它指向全局(Global)对象。

在浏览器中,window 就是该全局对象为 [object Window]:

var x = this;

严格模式下,如果单独使用,this 也是指向全局(Global)对象。

"use strict"; var x = this;

2.4-函数中使用 this(默认)

在函数中,函数的所属者默认绑定到 this 上。

在浏览器中,window 就是该全局对象为 [object Window]:

function myFunction() {​   return this;​ }

----喜欢文章且想要学习编程的资料和视频加v【lezijie006】备注暗号965添加领取哦(不备注暗号会被拒绝的o)---

2.5-函数中使用 this(严格模式)

严格模式下函数是没有绑定到 this 上,这时候 this 是 undefined

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

2.6-事件中的 this

在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:

点我后我就消失了

2.7-对象方法中绑定

下面实例中,this 是 person 对象,person 对象是函数的所有者:

var person = {​   firstName  : "John",​   lastName   : "Doe",​   id         : 5566,​   myFunction : function() {​    return this;​   }​};
var person = {​   firstName: "John",​   lastName : "Doe",​   id       : 5566,​   fullName : function() {​     return this.firstName + " " + this.lastName;​   }​ };

说明: this.firstName 表示 this (person) 对象的 firstName 属性。

2.8-显式函数绑定

在 JavaScript 中函数也是对象,对象则有方法,apply 和 call 就是函数对象的方法。这两个方法异常强大,他们允许切换函数执行的上下文环境(context),即 this 绑定的对象。

在下面实例中,当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:

var person1 = {​   fullName: function() {​     return this.firstName + " " + this.lastName;​   } ​} ​var person2 = {​   firstName:"John",​   lastName: "Doe", ​} ​person1.fullName.call(person2);  // 返回 "John Doe"