js中call和apply(函数的上下文调用模式)详解
2017-11-02 16:19
603 查看
别人写的终于搞明白
上下文调用综述:
<script>
//上下文模式:根据用户传递的参数,指定了函数内部不同的this的值
//核心:以call/apply方法来调用某个函数
//call/apply方法定义在哪里?Function.prototype对象中--->所有的函数都能访问到call/apply方法
//fn--->fn.__proto__(Function.prototype)-->fn.__proto__.__proto__(Object.prototype)
function fn(){}
</script>
call的第一个参数:
<script>
function fn(){
console.log(this);
}
//call方法的第一个参数决定了函数内部的this的值
//第一种情况:传递null/undefined--->函数内部的this指向window
fn.call(null);
fn.call(undefined);
//第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象
fn.call(100); //Number的实例
fn.call("hello");//String的实例
fn.call(true); //Boolean的实例
//第三种情况:传递对象--->函数内部的this指向该对象
fn.call(/abc/);
fn.call([1,3,5]);
fn.call(function(){});
</script>
apple的第一个参数:
<script>
function fn(){
console.log(this);
}
//call方法的第一个参数决定了函数内部的this的值
//第一种情况:传递null/undefined--->函数内部的this指向window
fn.apply(null);
fn.apply(undefined);
//第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象
fn.apply(100); //Number的实例
fn.apply("hello");//String的实例
fn.apply(true); //Boolean的实例
//第三种情况:传递对象--->函数内部的this指向该对象
fn.apply(/abc/);
fn.apply([1,3,5]);
fn.apply(function(){});
</script>
call方法的参数
<script>
function foo(a,b,c){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//call方法第一个参数指定函数内部的this的值
// 第二个参数表示函数的第一个实参
// 第三个参数表示函数的第二个实参
//以此类推
foo.call(null,1,3,5);
</script>
apply方法的参数列表
<script>
function foo(a,b,c){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//apply方法第一个参数指定函数内部的this的值
// 第二个参数必须是一个数组 or 伪数组
// 这个数组(伪数组)的第一个元素表示第一个实参,第二个元素表示第二个实参,以此类推
foo.apply(null,[1,3,5]);
</script>
上下文调用综述:
<script>
//上下文模式:根据用户传递的参数,指定了函数内部不同的this的值
//核心:以call/apply方法来调用某个函数
//call/apply方法定义在哪里?Function.prototype对象中--->所有的函数都能访问到call/apply方法
//fn--->fn.__proto__(Function.prototype)-->fn.__proto__.__proto__(Object.prototype)
function fn(){}
</script>
call的第一个参数:
<script>
function fn(){
console.log(this);
}
//call方法的第一个参数决定了函数内部的this的值
//第一种情况:传递null/undefined--->函数内部的this指向window
fn.call(null);
fn.call(undefined);
//第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象
fn.call(100); //Number的实例
fn.call("hello");//String的实例
fn.call(true); //Boolean的实例
//第三种情况:传递对象--->函数内部的this指向该对象
fn.call(/abc/);
fn.call([1,3,5]);
fn.call(function(){});
</script>
apple的第一个参数:
<script>
function fn(){
console.log(this);
}
//call方法的第一个参数决定了函数内部的this的值
//第一种情况:传递null/undefined--->函数内部的this指向window
fn.apply(null);
fn.apply(undefined);
//第二种情况:传递数字、字符串、布尔值--->函数内部的this指向对应的基本包装类型的对象
fn.apply(100); //Number的实例
fn.apply("hello");//String的实例
fn.apply(true); //Boolean的实例
//第三种情况:传递对象--->函数内部的this指向该对象
fn.apply(/abc/);
fn.apply([1,3,5]);
fn.apply(function(){});
</script>
call方法的参数
<script>
function foo(a,b,c){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//call方法第一个参数指定函数内部的this的值
// 第二个参数表示函数的第一个实参
// 第三个参数表示函数的第二个实参
//以此类推
foo.call(null,1,3,5);
</script>
apply方法的参数列表
<script>
function foo(a,b,c){
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
}
//apply方法第一个参数指定函数内部的this的值
// 第二个参数必须是一个数组 or 伪数组
// 这个数组(伪数组)的第一个元素表示第一个实参,第二个元素表示第二个实参,以此类推
foo.apply(null,[1,3,5]);
</script>
相关文章推荐
- js中call和apply(函数的上下文调用模式)详解
- 第195天:js---函数对象详解(call、apply)
- javascript四种调用方式——方法调用模式、函数调用模式、构造器调用模式和Apply或Call调用模式
- js 函数调用其他函数和方法 call,apply关键字
- js函数的间接调用call()、apply()和bind()
- Js中的上下文调用,apply与call
- (九)JavaScript之【JS函数(定义、参数、调用、【闭包】、call(),apply())】[较深,胆小勿进]
- JS函数与call()apply()详解
- JavaScript调用模式(this的取值)以及,call(),apply()函数浅析
- 用用匿名函数和闭包加apply强制待定函数调用时使用特定上下文
- JavaScript中的apply和call函数详解
- 关于Js函数对象的apply()和call()方法
- js的调用(apply,call)
- js 的 apply / call 函数
- JS中call/apply、arguments、undefined/null方法详解
- 详解js中的apply与call的用法
- js中对call()函数和apply()函数的深入探索
- js中bind、call、apply方法详解
- JavaScript中的apply和call函数详解(转)
- 基于JavaScript实现继承机制之调用call()与apply()的方法详解