• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 6天前 9次浏览

1.1-JavaScript 变量提升

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

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

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

x = 5; // 变量 x 设置为 5

elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

例 2

var x; // 声明 x
x = 5; // 变量 x 设置为 5

elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

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

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


1.2-JavaScript 初始化不会提升

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

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

var x = 5; // 初始化 x
var y = 7; // 初始化 y

elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML = x + ” ” + y;           // 显示 x 和 y

例 2

var x = 5; // 初始化 x

elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML = x + ” ” + y;           // 显示 x 和 y

var y = 7; // 初始化 y

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

例 2 类似以下代码:

var x = 5; // 初始化 x
var y;     // 声明 y

elem = document.getElementById(“demo”); // 查找元素
elem.innerHTML = x + ” ” + y;           // 显示 x 和 y

y = 7;    // 设置 y 为 7


1.3-在头部声明你的变量

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

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

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

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

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”


喜欢 (0)