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

39次阅读

共计 2669 个字符,预计需要花费 7 分钟才能阅读完成。

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 严格模式 (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