JavaScript函數的常用方法
apply()与call()方法
apply() 接受两个参数,第一个参数指定了函数体内this对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可以为类数组,apply() 方法把这个集合中的元素作为参数传递给被调用的函数。
例子:
function fn(n1, n2) {
console.log(n1 + n2); //输出:2
console.log(Object.is(window, this)); //输出:true
}
fn.apply(window, [1, 1]);
call()方法与apply()方法作用一模一样,区别仅在于传入参数形式的不同。
例子:
function fn(n1, n2) {
console.log(n1 + n2); //输出:2
console.log(Object.is(window, this)); //输出:true
}
fn.call(window, 1, 1);
call()和apply()的用途
1、改变函数内部的this指向。
例子:
var name = "out";
var obj = {
name: "int",
fn() {
console.log(this.name);
}
}
var person = {
name: "intElse"
}
obj.fn(); //输出:int
obj.fn.call(this); //输出:out
obj.fn.call(null); //输出:out
obj.fn.call(window); //输出:out
obj.fn.call(person); //输出:intElse
*当使用call() 或者apply() 的时候,如果我们传入的第一个参数为null,函数体内的this会指向默认的宿主对象,在浏览器中则是window。
2、借用其他对象的方法。
例子1:借用构造函数
function fn(name) {
this.name = name;
}
function Obj(name) {
fn.call(this, name);
}
var person = new Obj("Tom");
console.log(person.name); //输出:Tom
例子2:类数组借用数组的方法
(function() {
Array.prototype.push.call(arguments, 3, 4, 5);
console.log(arguments);
})(1, 2);
//输出:[1, 2, 3, 4, 5]
*如果一个对象想要借用数组的方法,这个对象至少需要满足两个条件:
1、对象本身要可以存取属性;
2、对象的length属性可读写。
bind()方法
bind() 方法与call() 的用法一致,唯一的不同是:bind() 是返回对应函数,便于稍后调用;call() 则是立即执行这个函数 。
例子:
function fn(n1, n2) {
console.log(n1 + n2);
}
fn.bind(window, 1, 1)(); //输出:2
fn.bind(window)(1, 1); //输出:2
fn.bind(window, 1)(1); //输出:2
*传入 bind() 方法的第二个以及以后的参数加上函数运行时传入的参数会按顺序传入被调用的函数。
箭头函数与apply()、call()和bind()
虽然箭头函数内部没有this对象的绑定,但我们仍然可以在剪头函数上调用这三个方法,但箭头函数的this值不会受到任何影响。
例子:
var name = "out";
var obj = {
name: "int",
fn: () => {
console.log(this.name);
}
}
var person = {
name: "intElse"
}
obj.fn(); //输出:out
obj.fn.call(this); //输出:out
obj.fn.call(null); //输出:out
obj.fn.call(window); //输出:out
obj.fn.call(person); //输出:out
如有错误,欢迎指正,本人不胜感激。
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦