暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

大数据编程入门:JavaScript this关键字

加米谷学院 2021-08-19
515

关键字是电脑语言里事先定义的,具有特别意义的标识符,有时候被称为保留字,今天小编将为大家带来大数据编程入门:JavaScript this关键字,介绍在JavaScript中关键字this的概念及应用。

JavaScript this关键字概念

在面向对象语言中,关键字this表示对当前对象的引用。

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

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

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

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

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

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

call()和apply()等方法可以将其引用到任何对象。

实例演示:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 <b>person</b> 对象。</p>

<p>因为 person 对象是 fullName 方法的所有者。</p>

<p id="demo"></p>

<script>

// 创建一个对象

var person = {

  firstName: "John",

  lastName : "Doe",

  id     : 5566,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

// 显示对象的数据

document.getElementById("demo").innerHTML = person.fullName();

</script>

</body>

</html>

运行结果:

方法中的this

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

在上面的示例中,this表示person对象。

fullName方法所属的对象是person。

实例:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 <b>person</b> 对象。</p>

<p>因为 person 对象是 fullName 方法的所有者。</p>

<p id="demo"></p>

<script>

// 创建一个对象

var person = {

  firstName: "John",

  lastName : "Doe",

  id     : 5566,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

// 显示对象的数据

document.getElementById("demo").innerHTML = person.fullName();

</script>

</body>

</html>

运行结果:

单独使用this

如果单独使用this,它将指向全局对象。

在浏览器中,window表示全局对象为 [object Window],示例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 window 对象:</p>

<p id="demo"></p>

<script>

var x = this;

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

运行结果:


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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<h2>JavaScript <b>this</b> 关键字</h2>

<p>实例中,<b>this</b> 指向了 window 对象:</p>

<p id="demo"></p>

 

<script>

"use strict";

var x = this;

document.getElementById("demo").innerHTML = x;

</script>

</body>

</html>

运行结果:

函数中使用this(默认)

在函数中,默认情况下,该函数的所有者绑定到此函数。

在浏览器中,window表示全局对象为 [object Window]:

function myFunction() {

  return this;

}

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

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

"use strict";

function myFunction() {

  return this;

}

事件中的this

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

<button onclick="this.style.display='none'">

点我后我就消失了

</button>

对象方法中的绑定

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

实例1:

var person = {

  firstName  : "John",

  lastName   : "Doe",

  id         : 5566,

  myFunction : function() {

    return this;

  }

};

实例2:

var person = {

  firstName: "John",

  lastName : "Doe",

  id       : 5566,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

说明:在上面实例中的this.firstName表示this(person)对象的firstName属性。

显示函数绑定

在JavaScript中,函数也是对象,对象有方法,apply和call是函数对象的方法,这两种方法非常强大。它们允许切换函数执行的上下文,即受此约束的对象。

在以下示例中,当我们使用person2作为参数调用person1.fullName方法时,这将指向person2,即使它是person1的方法:

var person1 = {

  fullName: function() {

    return this.firstName + " " + this.lastName;

  }

}

var person2 = {

  firstName:"John",

  lastName: "Doe",

}

person1.fullName.call(person2);  // 返回 "John Doe"

以上就是关于大数据编程入门:JavaScript this关键字的全部内容了,希望这篇文章能够帮助到大家~


热文荐读:

大数据开发学习之Spark Shuffle详解

五一快乐 | 大数据零基础预科班开始预约啦!

Spark从入门到精通:Spark学习路线规划

大数据开发学习之Flink核心概念详解

文章转载自加米谷学院,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论