JavaScript 函数调用 登录

JavaScript 函数调用

函数体代码在函数被调用时才会执行。

Javascript函数有4中调用方式:

普通的函数调用

方法调用

构造函数调用

通过 call() 和 apply() 间接调用


1.普通的函数调用

最常用的函数调用方式,如:

alert("hello");

var result = add(1, 2);

2. 方法调用

//定义一个函数

function hello(name) {

    alert('hello,' + name);

};

var user = {};

//赋值给user的sayHi属性

user.sayHi = hello;

//方法调用

user.sayHi('张三');

普通的函数调用和方法调用的一个区别:在"普通的函数调用"方式中,函数的调用上下文(this的值),为全局对象(非严格模式)或者undefined(严格模式)。而在"方法调用"方式中,this指向当前对象。利用这一特性,我们可以在方法不需要明确的返回值时,直接返回this,从而实现"方法链"。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction(10, 2); 
</script>
</body>
</html>

嵌套函数中的this:嵌套函数中,内层函数不会继承外层函数的this,即当内层函数作为方法调用时,内层函数的this指向当前调用对象;当内层函数作为函数调用时,this的值为全局对象(非严格模式)或者undefined(严格模式)。怎样在内层函数中访问外层函数的this呢?通常将this保存在一个局部变量中,通过变量来访问:

var obj = {

    f : function() {

        var self = this;

        console.log(this === obj);//true,this指向当前对象

        f1();

   function f1() {

            console.log(this === obj);//false,this为全局对象或者undefined

            console.log(self === obj);//true,self指向外层this,即当前对象

        }

    }

};

3. 构造函数调用

当使用new关键字创建一个对象时,即调用了构造函数。构造函数若没有形参,可以省略圆括号:

var obj = new Object();

//等价于

var obj = new Object;

调用构造函数,创建了一个新对象,这个新对象会成为该构造函数的调用上下文(this的值):

function User(name) {

    this.name=name;

    console.debug(this);

}

var user = new User('张三');

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<p id="demo"></p>
<script>
function myFunction(arg1, arg2) {
this.firstName = arg1;
    this.lastName  = arg2;
}
var x = new myFunction("John","Doe")
document.getElementById("demo").innerHTML = x.firstName; 
</script>
</body>
</html>

4. 通过 call() 和 apply() 间接调用

Javascript中函数也是对象,也拥有方法。其中 call() 和 apply() 可以用来间接调用函数。call() 的第一个参数用来指定调用上下文(即this的值),后面的参数是传入调用函数的实参。

var name = 'A';

var user = {

    name : 'B'

};

function showName() {

    alert(this.name);

}

showName();//A,this为全局对象

showName.call(user);//B,this为user对象

apply() 和 call() 类似,区别在于,后面的实参需要以数组的形式传递(可将当前函数的arguments数组直接传入)。



下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function sum(x,y){ return x+y; } result = sum(2,3); document.write( result ); </script> </head> <body> </body> </html>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送