函数上下文调用之call方法
2019-05-27 本文已影响0人
椋椋夜色
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 函数上下文调用之call方法 </title>
<script>
// 上下文调用其实本质就是说把函数里的this的指向给改掉
// 直接调用函数前面不加任何前缀， 函数里的this是window
// 如果加了前缀， 前缀是什么对象， 里面的this就是谁
// new调用函数， 函数里的this指向新创建的实例化对象
// 计时器里函数的this是window
// 伪数组有push吗？ 没有， 但是学完了上下文调用， 我们可以让伪数组有push方法
// 1. call用法：
// 函数.call(要修改的this指向的对象, 参数1, 参数2, 参数3, ....参数n)
// 例：
// f1.call(obj, 10, 20);
// 2.call可以借用别人的方法实现功能;
// 伪数组没有push,但是通过上下文调用，可以让伪数组有push方法;
// 默认this指向;
function f1 () {
console.log('f1被调用了');
console.log(this);
};
f1(); // this 指向 window;
// call 改变 this 指向之不带参数;
function f2 () {
console.log('f2被调用了');
console.log(this);
};
var obj = {name:"新对象"};
// 调用f1时，把f1里的this指向了obj
f2.call(obj); // this 指向 obj;
// call 改变 this 指向之带参数;
function f3 (a,b) {
console.log(a,b);
console.log(this);
};
f3.call(obj,10,20);
// this 指向 obj,并把参数传给了 f3;
// call 改变方法 this 指向;
var obj1 = {name:"li",sayHi:function(){
console.log(this);
}}
obj1.sayHi() // this 指向了 obj1;
obj1.sayHi.call(window); // this 指向了 window
// call可以借用别人的方法实现功能;
var arr = [10,20,30,40,50,];
arr.push(60);
console.log(arr); //(6)[10,20,30,40,50,60]
var weiArr = {
0:101,
1:202,
2:303,
'length':3
};
// 借用 arr 数组里的 push 方法,实现 伪数组 也具有 push方法;
arr.push.call(weiArr,404)
console.log(weiArr);
// {0: 101, 1: 202, 2: 303, 3: 404, length: 4}
// 优化借用 push 方法; push其实是Array原型对象方法，所以找到原型来借用方法就行了，就不用再新建真数组了;
var weiArr1 = {
0:10,
1:20,
2:30,
'length':3
};
Array.prototype.push.call(weiArr1,40);
console.log(weiArr1); // {0: 10, 1: 20, 2: 30, 3: 40, length: 4}
</script>
</head>
<body>
</body>
</html>
