JavaScript 函数调用 具有 4 种_JS 函数


JavaScript 函数调用


JavaScript 函数具有 4 种调用方式。而且每种方式都不同在于 this 的初始化。


一、this 关键字

一般来说,在 Javascript 中,this指向的函数执行时此刻对象。


提示注意 this 是保留关键字的,你不可以修改 this 的值。

二、调用 JavaScript 函数

在前面章节中我们已经学会了该如何创建函数。

函数中的代码在函数被调用后执行的。


三、作为一个函数调用

示例代码

function myFunction(a, b) {

   return a * b;

}

myFunction(10, 2);           // myFunction(10, 2) 返回 20


演示一下

以上函数不属于任何对象。但是在 JavaScript 中,一直存在着一种默认的全局对象。

在 HTML 默认中,全局对象是 HTML 页面本身,这上面所有的函数“属于”HTML 页面。

浏览器中的这个页面对象就是浏览器窗口。这上面的函数自动形成一个窗口函数。

myFunction() 和 window.myFunction() 是一样的函数:

示例代码

function myFunction(a, b) {

   return a * b;

}

window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20


演示一下



此调用 JavaScript 函数常用的方法, 不过这不是良好的编程习惯
全局变量,方法或函数轻松造成命名冲突的bug和漏洞。

四、全局对象

在函数没有被自身的对象调用时 this 的值就会成为全局对象。

在 web 浏览器中,全局对象即是浏览器 window 对象。

本例子中 this 的值返回 window 这个对象:

示例代码

function myFunction() {

   return this;

}

myFunction();                // 返回 window 对象


演示一下



作为函数为全局对象调用,会使 this 的值形成为全局对象。
运用 window 对象很容易对变量造成程序崩溃。

五、函数方法调用

你在 JavaScript 中,可把函数定义为对象方法。

以下面示例代码创建了一个对象(myObject),具有两个属性(firstName 和 lastName),乃至一个方法(fullName):

示例代码

var myObject = {

   firstName:"ffgg",

   lastName: "ggh",

   fullName: function () {

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

   }

}

myObject.fullName();         // 返回 "ffgg ggh"


演示一下

fullName 方法是一个函数。此函数属于对象。myObject 是函数的具有者。

被称为是拥有 this 的事物,这段 JavaScript 代码对象。在这示例代码中,this 值为 myObject 对象。

测试了一下!修改 fullName 这个方法来返回 this 的值:

示例代码

var myObject = {

   firstName:"ffgg",

   lastName: "ggh",

   fullName: function () {

       return this;

   }

}

myObject.fullName();          // 返回 [object Object] (对象的所有者)


演示一下



作为函数对象方法调用,会使得 this 的值成为对象本身。

六、通过构造函数调用函数

如果函数在调用前面是 new 关键字,那这就是一个构造函数调用。

看起来就像刚创建了一个新的函数,但是由于 JavaScript 函数是对象,你实际上你有创建一个新对象:

示例代码

// 构造函数:

function myFunction(arg1, arg2) {

   this.firstName = arg1;

   this.lastName  = arg2;

}

// This    creates a new object

var x = new myFunction("ffgg","ggh");

x.firstName;                             // 返回 "ffgg"


演示一下

构造器在调用时,会创建新的对象。新对象会从其构造器继承属性和方法。



构造的函数中 this 关键字木有任何值。
this 的值,会成为调用函数时创建新的对象。

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved