JavaScript系列:函数调用方式
有关JS的问题,持续更新..
一,函数调用的4种方式
1,函数调用模式
//下面这种模式叫 “函数调用模式”:窗后window来调用
//函数调用四种方式的基础
//这tm不就是作用域this的问题吗
//我们最常用的定义函数方式,function a(){}就是"函数调用模式",只要记得这种方法内的this是window便可。
function whichObj1() { this.a = 1; //this==> window alert(this.a+'+'+this); } whichObj1(); //本质window. whichObj1();用window可以“点”出这个方法 /*下面的定义函数,函数内的this,注意不是whichObj2,是window*/ /*这种采用var的定义函数方式,和 function whichObj2(){}一样*/ var whichObj2 = function () { this.a = 2; //this==> window alert(this.a + '+' + this); } whichObj2(); //本质window. whichObj1();用window可以“点”出这个方法
你懂this吗
函数调用函数
function fun1() { alert("fun1"); } function fun2() { fun1(); // 在函数B中,调用A方法 alert("fun2"); } fun2();
fun1(){fun2()},fun1执行的就是fun2()
下面看一个例子
<script type="text/javascript"> var add = function(a, b) { return a + b; } var myObject = { value:3 }; myObject.func = function() { var helper = function() { this.value = add(this.value, this.value); //此处3个value均为NAN,因为this指向window } // 函数调用模式 helper(); } // 方法调用模式 myObject.func(); alert(myObject.value);//为3不是6 </script> //为什么不是6呢 //改进 <script type="text/javascript"> var add = function(a, b) { return a + b; } var myObject = { value:3 }; myObject.func = function() { var that = this; // this对应myObject对象 (1) var helper = function() { //this.value = add(this.value, this.value); //这里调用模式为函数调用模式,而非方法调用模式,所以this对应全局对象 (2) that.value = add(that.value, that.value); } // 函数调用模式 helper(); } // 方法调用模式 myObject.func(); alert(myObject.value); </script>
函数调用模式:window直接调用。不是某个对象调用。
2,方法调用模式
//下面这种模式叫 “方法调用模式”:方法作为一个json对象的成员来调用。一般函数做为成员,我们通常称之为方法
//这种调用模式,方法内的this指的是本json对象
//这个json对象,随意可以"点"出一个成员(加入'点'出方法,那么这个方法内的this记得是这个json对象)
function makeArray(arg1, arg2) { return [this, arg1, arg2]; } var arrayMaker = { someProperty: 'some value here', make: makeArray }; //invoke the make() method console.log(arrayMaker.make('one', 'two')); // => [ arrayMaker, 'one', 'two' ] console.log(arrayMaker['make']('one', 'two')); // => [ arrayMaker, 'one', 'two' ]
方法调用模式,json对象调用成员的2中方式
方法调用模式和函数调用模式区别:this的大转变
function makeArray(arg1, arg2) { return [this, arg1, arg2]; } console.log(makeArray('one', 'two'));//this指向window //但是将此函数放到json对象,为为一个方法来调用,怎么this就从window变成了json对象了呢?
方法调用模式和函数调用模式的对比,同一个函数,this指向怎么就变了呢?
我们不去谈理论上的作用域链,记住:哪个对象调用这个fucntion a(){this...},这this就指哪个对象。
上面在一个函数里面:var helper=function(){this.value..},请问这个helper函数的调用对象是谁?
没写默认值window,ok,所以this指向window。json对象调用,ok,this就是这个json对象。
哦,有人和var 这个有点乱,明确:和私有、公有木有关系。
哦,有人和fucntion helper(){this..}这种有点乱,明确:这两种几乎一样,ok,就把这两种当成一样。
再说,内嵌的函数使用外部函数的变量,也就是形成了闭包。
现在想一想,这两种模式,本质都一样嘛~window也是对象嘛~~为啥window调用函数非叫“函数调用模式”呢?其实就是比较”特殊的方法调用模式“而已。
不行,我还要举个常用的例子,看真正懂上面的不
<input type="button" value="Button 1" id="btn1" /> <input type="button" value="Button 2" id="btn2" /> <input type="button" value="Button 3" id="btn3" onclick="buttonClicked();"/> <script type="text/javascript"> function buttonClicked(){ var text = (this === window) ? 'window' : this.id; alert( text ); } var button1 = document.getElementById('btn1'); var button2 = document.getElementById('btn2'); button1.onclick = buttonClicked; button2.onclick = function(){ buttonClicked(); }; </script>
input的click事件中的this
第四
function doSomething (obj,evt) { var text =obj===window?window:obj.id; alert(text);//child2 } <div id="child2" onclick="doSomething(this,event);" style="width:200px;height:200px;background-color:lightblue;">
第一,this为所属的对象(按钮元素)。btn1
第二,外函数调用内函数,内函数函数体的this指的window。是window调用的。window
第三,和第二个一样。window
第四,dom中的this,指向就是这个dom元素
3,构造器调用模式
有关这个篇幅要长..
4,call apply调用方式
区别:call方法传参的时候,多加一个对象,参数依次写就ok。apply,多传一个对象,参数必须放到数组内
最新文章
- Linux关闭休眠和屏保模式
- ReferenceEquals和 == 和equals()的比较
- Inventory of the materials to teach you how to query a date certain combination of dimensions
- MMU和TLB
- Part 89 to 91 Talking about pass the parameters in thread
- bzoj1799
- Spring MVC 3.2 406 Not Acceptable
- Java中Math类的常用方法
- SQL Server DATA文件夹下audittrace20180124152845_52.trc类文件异常增多
- servlet的xx方式传值中文乱码
- echarts和highcharts比较
- Statistical Artifact (error)
- STM32 ADC转换时间
- SpringBoot实现监听redis key失效事件
- 《图解 HTTP 》阅读 —— 第一章
- iOS边练边学--UIGestureRecognizer手势识别器简单介绍
- kettle中denormalizer(列转行)的使用
- 使用ThinkPHP5连接数据库
- NS10.1 产品技术规范
- 【密码学】RSA密钥长度、明文长度和密文长度