提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript函数调用的对象和方法

JavaScript方法对象 函数调用
2023-06-13 09:14:23 时间
如果你真正理解Javascript函数是如何调用工作的，那么就可以避免一些bug的发生；
首先让我们创建一个简单的函数,这个函数将在下文中使用,这个函数仅仅返回当前的this的值和两个提供的参数.
复制代码代码如下:

functionmakeArray(arg1,arg2){
return[this,arg1,arg2];
}

调用这个函数非常的简单,我们需要做的仅仅是：

复制代码代码如下:

makeArray("one","two");

返回值：=>[window,"one","two"]
问题出现了，this的值怎么会变成了window？下面做个简单分析：
在Javascript里,有一个全局的对象,那些看起来散落在你的脚本里的每一行代码，其实都被写在了一个全局对象的上下文里.在我们的例子中,其实那个makeArray函数可以说不是一个松散的全局函数,而是全局对象的一个方法,让我们返回来看浏览器,在这个环境里它的全局对象被映射到window对象.让我们来证明一下:
复制代码代码如下:
alert(typeofwindow.makeArray);

返回值：=>function

所有的这些意味着我们之前调用makeArray的方法是和下面调用的方法一样的，
复制代码代码如下:
window.makeArray("one","two");

返回值：=>[window,"one","two"]

JavaScript函数调用规则1：在没有通过明确所有者对象而直接调用的函数中，如myFunction()，将导致this的值成为默认对象（浏览器中的窗口）。

现创建一个简单的对象,使用makeArray函数作为它的一个方法,我们将使用json的方式来声明一个对象,我们也来调用这个方法：

复制代码代码如下:
vararrayMaker={
someProperty:"somevaluehere",
make:makeArray
};
arrayMaker.make("one","two");
//返回：=>[arrayMaker,"one","two"]
arrayMaker["make"]("one","two");
//返回：=>[arrayMaker,"one","two"]

this的值变成了对象arrayMaker本身.你可能会疑问原始的函数定义并没有改变,为何它不是window了呢.函数是一个对象，你可以传递它们或者复制他们.就好像整个函数连带参数列表和函数体都被复制,且被分配给了arrayMaker里的属性make,那就好像这样定义一个arrayMaker:
复制代码代码如下:
vararrayMaker={
someProperty:"somevaluehere",
make:function(arg1,arg2){return[this,arg1,arg2];}
};

JavaScript函数调用规则2：在一个使用方法调用语法,像obj.myFunction()或者obj["myFunction"](),这时this的值为obj。

这是事件处理代码中bug的主要源头,看看下面的例子：

复制代码代码如下:
<inputtype="button"value="Button1"id="btn1"/>
<inputtype="button"value="Button2"id="btn2"/>
<inputtype="button"value="Button3"id="btn3"onclick="buttonClicked();"/>
<scripttype="text/javascript">
functionbuttonClicked(){
vartext=(this===window)?"window":this.id;
alert(text);
}
varbutton1=document.getElementById("btn1");
varbutton2=document.getElementById("btn2");
button1.onclick=buttonClicked;
//返回值：=>btn1，它是一个方法调用，this为所属的对象(按钮元素）
button2.onclick=function(){buttonClicked();};
//返回值：=>window，因为buttonClicked()是被直接调用的(不像obj.buttonClicked().)这和我们第三个按钮,将事件处理函数直接放在标签里是一样的.所以点击第三个按钮的结果是和第二个一样,都是window.
</script>

我们知道在Javascript中没有类,而且任何一个自定义的类型需要一个初始化函数,使用原型对象(作为初始化函数的一个属性)定义你的类型,让我们来创建一个简单的类型

复制代码代码如下:
functionArrayMaker(arg1,arg2){
this.someProperty="whatever";
this.theArray=[this,arg1,arg2];
}
//声明实例化方法
ArrayMaker.prototype={
someMethod:function(){
alert("someMethodcalled");
},
getArray:function(){
returnthis.theArray;
}
};
varam=newArrayMaker("one","two");
varother=newArrayMaker("first","second");
am.getArray();
//返回值：=>[am,"one","two"]

值得注意的是出现在函数调用前面的new运算符,没有它,函数就像全局函数一样,且我们创建的那些属性都将是创建在全局对象上(window),而你并不想那样,另一个话题是,因为在你的构造器里没有返回值,所以如果你忘记使用new运算符,将导致你的一些变量被赋值为undefined.因为这个原因,构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.

Javascript函数调用规则3：当你将函数用作初始化函数的时候,像MyFunction(),Javascript的运行时将把this的值指定为新建的对象.

相关文章