Open yangbo5207 opened 8 years ago
call/apply 都是为了改变某个函数的执行上下文而存在的,换句话说就是为了改变函数的this指向。 除了传递参数时有所差别,call和apply作用完全一样.
其中apply传递的参数为数组形式, call传递的参数为按顺序依次排列
// 当参数个数不确定或者你觉得用apply比较爽时, 就直接使用apply // 字面解释就是obj夺舍fn,obj拥有了执行fn函数的能力,并且this指向obj. var arguments = { 0:'name', 1:'age', 2:'gender' }; fn.apply(obj, arguments); fn.call(obj, name, age, gender);
下面我收集了几个我遇到过的实际例子
// arguments // 返回值为数组,arguments保持不变 var arg = [].slice.call(arguments); // nodeList var nList = [].slice.call(document.getElementsByTagName('li'));
var foo = { name: 'joker', showName: function() { console.log(this.name); } }; var bar = { name: 'rose' }; foo.showName.call(bar); // rose
// parent var Person = function(name) { this.name = name; this.gender = ['man', 'woman']; } // child var Student = function(name, age) { // inherit Person.call(this); } Student.prototype.message = function() { console.log('name:'+this.name+', age:'+this.age+', gender:.'+this.gender[0]); } var xm = new Student('xiaom', 12); xm.message(); //name:undefined, age:undefined, gender:.man
var Nicco = function(name) { this.name = name; } Nicco.prototype = function() { constructor: Nicco, message: function() { var _this = this; addEventListener( 'mousedown', function() { // stay this return _this.fndown.call(_this); }, false ); }, fndown: function() { var _this = this, str = this.name + ', i miss you.'; addEventListener( 'mouseup', function() { return _this.fnup.call(_this, str); }, false ); }, fnup: function(str) { console.log(str); } }
call/apply 都是为了改变某个函数的执行上下文而存在的,换句话说就是为了改变函数的this指向。 除了传递参数时有所差别,call和apply作用完全一样.
其中apply传递的参数为数组形式, call传递的参数为按顺序依次排列
下面我收集了几个我遇到过的实际例子