Js中call apply函数以及this用法

this介绍:

C#里this关键字的意义比较确定的。JavaScript的this关键字,随着函数使用场合不同,this的值会发生变化,感觉用法比较混乱,所以,现在是有必要整理一下的时刻了!

总结一个原则:在js里面,this指针代表的是执行当前代码的对象的所有者。

1、和c#类似的纯粹函数调用:

function test() {
  this.x = 1;
  alert(x);
}
test();//1

其实这里的this就是全局变量。看下面的例子就能很好的理解这里的this就是全局对象Global。

var x = 1;
function test() {
     alert(this.x);
}
test();//1

var x = 1;
function test() {
    this.x = 0;//修改了全局变量,this就是全局对象Global
}
test();
alert(x);//0

2、作为方法调用,那么this就是指它的上级对象。

function test() {
  alert(this.x);//this是指它的上级对象,这里的上级是调用该函数的对象p;
}
var p = {};
p.x = 1;
p.m = test;
p.m(); //1 ;这里m是test方法,p是this,输出的是p.x;

3、作为构造函数调用:所谓构造函数,就是用new生成一个新的对象。这时,这个this就是指这个对象。

function test() {
   this.x = 1;
}
var p = new test();
alert(p.x);//1;这里也可以理解为其上级对象是一个构造函数p;

4、apply调用this指向的是apply中的第一个参数。

var x = 0;
function test() {
   alert(this.x);
}
var p = {};//定义一个对象
p.x = 1;
p.m = test;
p.m.apply(); //0;当apply没有参数时,表示为全局对象。所以值为var x = 0;
p.m.apply(p);//1;p继承了test,但是this还是指向其上级对象p;

Call()与apply()两个方法介绍:

它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区别:

call方法:  call(thisObj,[arg1,arg2…] )
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法: apply(thisObj,argArray)
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作thisObj, 并且无法被传递任何参数。

ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是this的值,剩余的参数是需要传递给函数的值。二者区别在第二个参数上,call后面除了第一个参数是用来改变函数的this作用域之外,后面加几个参数,则函数就有几个参数,而apply总共就2个参数,第一个参数与call一样,第二个参数是一个数组,里面有几个值,则在执行函数时的参数就有几个,例子如下:

var fun = function(param1,param2){};

fun.call(window,1,2);

fun.apply(window,[1,2]);//这两个是等价的!

下面,我们看看二者都怎么用:

1.带参数和不带参数的区别

function main(){
    var str = "hello";
    console.log(str);
}
main.call();//hello;当call/apply没有参数时,表示为全局对象。所以值为hello;

2.利用call调用原型中的方法:

// 写法1
var arr1 = ["a1","b2","c3"];
var value1 = arr1.shift();//shift把数组的第一个元素从其中删除,并返回第一个元素的值
console.log(value1);  //a1

//写法2
var arr2 = ["a1","b2","c3"];
var value2 = Array.prototype.shift.call(arr2);  //a1;调用原型prototype中的shift方法 console.log(value2);

console.log是一个打印js数组和对像的函数,大家用的最多查看js输出是alert,但是alert只能弹string或者是int,console.log可以在浏览器的控制台输出结果!很好的调试工具!

3.利用call模仿继承:

<script>
function fun1() {
    this.a = 123;
    this.add = function () {alert(this.a );}
}
function fun2() {
    this.a = 456;
}
var f1=new fun1()
var f2=new fun2()
var a = f1.add.call(f2); // a输出的是456,在函数体内参数f2就是this的值,像f2继承f1
</script>

这里就是把f1的方法拿给f2来使用,f2便可以使用f1中所有的方法,这就像高级语言中继承的概念(感觉像f2继承f1)。

4.使用多个call实现多继承:

function fun1() {
    this.add = function () { return this.a }
}
function fun2() {
    this.sub = function () { return this.a-this.b }
}
function fun3() {
    this.a = 10;
    this.b = 2;
    fun1.call(this);//this是当前对象fun3,它继承了fun1和fun2
    fun2.call(this);//作用是把fun1和fun2的方法“继承”给fun3
 }
 var f3 = new fun3()
 alert(f3.add());
 alert(f3.sub());//如此,想要继承谁就可以继承谁

上面用到一些数组的方法,这里整理一下:

Array 对象方法:

concat()

连接两个或更多的数组,并返回结果

join()

把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔(,)

pop()

删除并返回数组的最后一个元素

push()

向数组的末尾添加一个或更多元素,并返回新的长度

reverse()

颠倒数组中元素的顺序

shift()

删除并返回数组的第一个元素

slice()

从某个已有的数组返回选定的元素slice(start,end):返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素。请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()

sort()

对数组的元素进行排序

splice()

删除元素,并向数组添加新元素:array.splice(index,howmany,item1,.....,itemX)

arr.splice(2,0,"William")

index : 整数,规定添加/删除项目的位置(从0开始),使用负数可从数组结尾处规定位置。

howmany : 要删除的项目数量,如果设置为 0,则不会删除项目插入,1替换。

item1, ..., itemX : 可选,向数组添加的新项目。

toString()

把数组转换为字符串,并返回结果

unshift()

arrayObject.unshift(newelement1,newelement2,....,newelementX):向数组的开头添加一个或更多元素,并返回新的长度

valueOf()

返回数组对象的原始值

时间: 2024-10-12 03:27:35

Js中call apply函数以及this用法的相关文章

详解js中的apply与call的用法

前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 方法定义applyFunction.apply(obj,args)方法能接收两个参数: obj:这个对象将代替Function类里this对象 args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数. call call方法与apply方法的第

js中的apply与call的用法与区别

call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.call 和 apply二者的作用完全一样,只是接受参数的方式不太一样. 方法定义applyFunction.apply(obj,args)方法能接收两个参数: obj:这个对象将代替Function类里this对象 args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数. call call方法与apply方法的第一个参

underscore.js中的节流函数debounce及trottle

函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeout函数 clearTimeout(cancelTimer); cancelTimer =setTimeout(function(){ switchControl.switchAciontFactory(view, conf); },300) 代码的意思就不做多说了,实际上我无意间实现了一个debou

JS中关于把函数作为另一函数的参数的几点小总结

//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*function test1(Func){Func();}function test2(){alert("我是test2");}test1(test2);*/ //第二种,带参数的普通调用法.跟第一种唯一的区别就是在定义主函数的执行语句里调用参数函数时该把参数加上/*function test1(F

js中字符替换函数String.replace()使用技巧

String.replace( ) 简介 语法: var strings = string.replace(regexp, replacement) regexp :您要执行替换操作的正则表达式,如果传入的是一个字符串,那就会当作普通字符来处理,并且只会执行一次替换操作:如果是正则表达式,并且带有 global (g) 修饰符,则会替换所有出现的目标字符,否则,将只执行一次替换操作. replacement :您要替换成的字符. 返回值是执行替换操作后的字符串. 11 String.replac

JS中的定时函数(setTimeout,clearTimeout,setInterval,clearInterval详解 )

设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout("alert('ok')",5000); 方法二: window.setTimeout(function() { alert("Ok"); }, 5000); 方法三: function showAlert() { alert("ok"); } window.s

js中获取时间new date()的用法

js中获取时间new date()的用法 获取时间:   var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getFullYear(); //获取完整的年份(4位,1970-????) 3 myDate.getMonth(); //获取当前月份(0-11,0代表1月) 4 myDate.getDate(); //获取当前日(1-31) 5 myDate.getDay();

js中如何在一个函数里面执行另一个函数

1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } ps:在需要传参的情况下,函数a里面的参数c同时可以传到函数b里面. 2.如何20秒后执行另一个函数 function a(){ setTimeout(b,20000)}function b(){ alert("20秒以后了哦")} 3.什么是回调函数 回调就是一个函数的调用过程.回调,回调,就是回头调用的意思.函数a的事先干完,回头再调用函数b. 函数a有一个参

VHDL中的数据转换函数conv_std_logic_vector的用法

VHDL中的数据转换函数conv_std_logic_vector的用法 2017-04-10 11:58 501人阅读 评论(0) 收藏 举报  分类: 常用(13)  FPGA(7)  高压变频(36)  程序备忘(42)  std_logic_arith程序包里定义的数据转换函数:conv_std_logic_vector(A,位长)--INTEGER,SINGER,UNSIGNED转换成std_logic_vector. 由于参考书上都没有具体说明,本以为是将原来的数据类型按位矢量输出,