javascript JavaScript的函数(功能)字面量

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript JavaScript的函数(功能)字面量相关的知识,希望对你有一定的参考价值。

http://www.intalesson.com/course/node/1
上面网址的视频理解不错,但是感觉和另外的不一样


作为一个函数调用
实例
function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);           // myFunction(10, 2) 返回 20

尝试一下 »
以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

在 HTML 中默认的全局对象是 HTML 页面本身,所以函数是属于 HTML 页面。

在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

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

实例
function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);    // window.myFunction(10, 2) 返回 20

尝试一下 »
Note	这是调用 JavaScript 函数常用的方法, 但不是良好的编程习惯 
全局变量,方法或函数容易造成命名冲突的bug。
--------------------------------------------------
全局对象
当函数没有被自身的对象调用时, this 的值就会变成全局对象。

在 web 浏览器中全局对象是浏览器窗口(window 对象)。

该实例返回 this 的值是 window 对象:

实例
function myFunction() {
    return this;
}
myFunction();                // 返回 window 对象

尝试一下 »
Note	函数作为全局对象调用,会使 this 的值成为全局对象。
使用 window 对象作为一个变量容易造成程序崩溃。
---------------------------------------
函数作为方法调用
在 JavaScript 中你可以将函数定义为对象的方法。

以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

实例
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();         // 返回 "John Doe"

尝试一下 »
fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象,拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

测试一下!修改 fullName 方法并返回 this 值:

实例
var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}
myObject.fullName();          // 返回 [object Object] (所有者对象)

尝试一下 »
Note	函数作为对象方法调用,会使得 this 的值成为对象本身。
------------------------------------------------
使用构造函数调用函数
如果函数调用前使用了 new 关键字, 则是调用了构造函数。

这看起来就像创建了新的函数,但实际上 JavaScript 函数是重新创建的对象:

实例
// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}

// This creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

尝试一下 »
构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

Note	构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
------------------------
作为函数方法调用函数
在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。

实例
function myFunction(a, b) {
    return a * b;
}
myFunction.call(myObject, 10, 2);      // 返回 20

实例
function myFunction(a, b) {
    return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray);   // 返回 20
两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数: apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。

在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值, 即使该参数不是一个对象。

在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

Note	通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但,JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性 和 方法。

arguments.length 属性返回函数调用过程接收到的参数个数:

实例
function myFunction(a, b) { 
    return arguments.length; 
}

尝试一下 »
toString() 方法将函数作为一个字符串返回:

实例
function myFunction(a, b) { 
    return a * b; 
} 

var txt = myFunction.toString();

尝试一下 »
Note	函数定义作为对象的属性,称之为对象方法。 
函数如果用于创建新的对象,称之为对象的构造函数。
实例
function myFunction(a, b) { 
    return a * b; 
} 

var x = myFunction(4, 3);

尝试一下 »
JavaScript 函数可作为表达式使用:

实例
function myFunction(a, b) { 
    return a * b; 
} 

var x = myFunction(4, 3) * 2;
函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

Y不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

实例
(function () { 
    var x = "Hello!!";      // 我将调用自己 
})();

尝试一下 »
以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。
在之前的教程中我们已经了解了 "hoisting(提升)"。

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:    

myFunction(5);               
function myFunction(y) {        
    return y * y;        
}
使用表达式定义函数时无法提升。
在以上实例中,我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

实例
var myFunction = new Function("a", "b", "return a * b"); 

var x = myFunction(4, 3);

尝试一下 »
实际上,你不必使用构造函数。上面实例可以写成:

实例
var myFunction = function (a, b) {return a * b} 

var x = myFunction(4, 3);

尝试一下 »
Note	在 JavaScript 中,很多时候,你需要避免使用 new 关键字。
this   指向当前操作对象
callee 指向参数集合所属函数
prototype  指向函数附带的原型对象
constructor  指向创建该对象的构造函数
参数类型
  形参
    定义函数时候使用的参数
    接受调用该函数时传递的参数
  实参
    调用函数时传递给函数的实际参数
特性
  参数个数没有限制
    实参<形参   多余形参=undefined
    实参>形参   多余参数被忽略
  参数的数据类型没有限制
  通过arguments对象访问参数数组
  参数始终按值传递
    基本类型  传值
    引用类型  传地址
功能
  存放实参的参数列表
特性
  京能在函数体内使用
  带有下标属性,但并非数组
  函数声明时自动初始化
属性
  lenght:获取函数实参的长度
  callee 返回当前正在指向的函数
  caler  返回调用当前正在执行函数的函数名
apply
  将函数作为对象方法来调用
  将参数以数组形式传递给该方法
call
  将函数作为对象的方法来调用
  将指定参数传递给该方法
toString
  返回函数的字符串表示
静态方法
  function abc ([参数列表]){
    函数体;
    [return][函数返回值;]]
  }
动态匿名方法
  var 函数名 = new Fuctio(["虚参列表"]){函数体;}
直接量方法
  函数名=function([虚参列表]){函数体;}
  
  
  
直接调用
  函数名(实参)
在连接中调用
  <a href = "javascript:函数名()">描述文字</a>
在事件中调用
  事件类型="函数名()"
递归调用
  定义
    在函数体内部调用函数自身
  格式:
    function 函数名(){
      代码
      函数名();
    }
在您仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:

 function myFunction(a,b)
 {
if (a>b)
  {
  return;
  }
x=a+b
}
如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。
-------------------------
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

语法
 function myFunction()
 {
var x=5;
return x;
}
上面的函数会返回值 5。

注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。

函数调用将被返回值取代:

 var myVar=myFunction();
myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。

即使不把它保存为变量,您也可以使用返回值:

 document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。

您可以使返回值基于传递到函数中的参数:

实例
计算两个数字的乘积,并返回结果:

function myFunction(a,b)
{
return a*b;
}

document.getElementById("demo").innerHTML=myFunction(4,3);
"demo" 元素的 innerHTML 将是:

12
函数(Function)字面量 定义一个函数:

function myFunction(a, b) { return a * b;}

以上是关于javascript JavaScript的函数(功能)字面量的主要内容,如果未能解决你的问题,请参考以下文章

javascript的fetch函数?

JavaScript-Runoob-JS函数:JavaScript 函数调用

JavaScript之基础-5 JavaScript 函数

JavaScript-Runoob-JS函数:JavaScript 函数定义

JavaScript-Runoob-JS函数:JavaScript 函数参数

javascript函数可以带参数吗