call()与apply()
call() 和 apply()都是为了改变被调用的函数内部的上下文（context）而存在的，即改变被调用的函数内部的this指向;
call() 和 apply()二者的作用完全一样，只是接受参数的方式不同，call接收参数列表，apply接收一个数组或伪数组;
一、call()
- 语法：function.call(thisArg, arg1, arg2, arg...);
- 语法参数说明：call()方法调用一个函数function, 其具有一个指定的this值和分别提供的参数
- 作用：可以让call()中的对象调用当前对象所拥有的函数
- call()中的对象指的是：thisArg,即传递到call()方法中的this
- 当前对象指的是：function对象
- 区别：和apply()的区别在于传递的参数不同，apply传递的参数是一个数组或伪数组
- 非严格模式中： this为null和undefined时会自动指向全局对象(window对象)
// 1.案例：使用Food构造函数创建的对象实例拥有在Product构造函数中添加的name属性和price属性,但category属性是在Food的构造函数中定义的。
// 使用call()实现继承父构造函数中的成员
function Product (name, price) {
this.name = name;
this.price = price;
this.show = function () {
console.log("今天" + this.name + "的价格：￥" + this.price + "元");
}
if (price < 0) {
throw RangeError(this.name + "的价格不能为负数"); //抛出错误
}
}
function Food (name, price) {
Product.call(this,name,price); //使用call()方法调用父构造函数可以实现继承
this.category = "food";
}
// 等同于
function Food (name, price) {
this.name = name;
this.price = price;
this.show = function () {
console.log("今天" + this.name + "的价格：￥" + this.price + "元");
}
if (price < 0) {
throw RangeError(this.name + "的价格不能为负数");
}
this.category = "food";
}
var objFood = new Food("大米", "2.50");
console.log(objFood);
objFood.show();
// 2.实现继承
function Animal(name){
this.name = name;
this.showName = function(){
console.log(this.name);
}
}
function Cat(name){
Animal.call(this, name);
}
var cat = new Cat("Black Cat");
cat.showName(); //Black Cat
// 3.使用call()调用匿名函数
//在下例中的for循环体内，我们创建了一个匿名函数，然后通过调用该函数的call方法，将每个数组元素作为指定的this值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个print方法，这个print方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为this值传入那个匿名函数（普通参数就可以），目的是为了演示call的用法。
var animals = [
{species: 'Lion', name: 'King'},
{species: 'Whale', name: 'Fail'}
];
for (var i = 0; i < animals.length; i++) {
(function (i) {
this.print = function () {
console.log('#' + i + ' ' + this.species + ': ' + this.name);
}
this.print(); //#0 Lion: King //#1 Whale: Fail
}).call(animals[i], i);
}
二、apply
- 语法：function.apply(thisArg, [argsArray]);
- 语法参数说明：apply()方法调用一个函数function, 其具有一个指定的this值和数组或伪数组
- 作用：可以让apply()中的对象调用当前对象所拥有的函数
- apply()中的对象指的是：thisArg,即传递到apply()方法中的this
- 当前对象指的是：function对象
- 区别：和call()的区别在于传递的参数不同，call()传递的参数是一个个的参数
- 非严格模式中： this为null和undefined时会自动指向全局对象(window对象)
- Chrome 14 以及 Internet Explorer 9 仍然不接受伪数组对象。如果传入伪数组对象，它们会抛出异常
Function.apply(obj,args)方法能接收两个参数：
obj：这个对象将代替Function类里this对象
args：这个是数组或类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数。
// 3. 案例：apply()与call()参数对比
// 参数是数据列表
(function (){
Array.prototype.push.call(arguments,6,7);
console.log(arguments); //[1, 2, 3, 6, 7]
})(1,2,3);
// 参数是数组
var arr1 = [1,2,3];
var arr2 = [4,5,6];
Array.prototype.push.apply(arr1,arr2);
console.log(arr1);//[1, 2, 3, 4, 5, 6]
console.log(arr2);//[4, 5, 6]
// 使用别人的方法，此时foo中的logName方法将被bar引用 ，this指向了bar
var foo = {
name:"明明",
logName:function(){
console.log(this.name);
}
}
var bar={
name:"白白"
};
foo.logName.apply(bar);//白白
三、判断数据类型
console.log(Object.prototype.toString.call(123)) ; //[object Number]
console.log(Object.prototype.toString.call('123')); //[object String]
console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call(function(){})); //[object Function]
四、严格模式与非严格模式的this指向
- 在非严格模式下当我们第一个参数传递为null或undefined时，函数体内的this会指向默认的宿主对象，在浏览器中则是window
function test() {
console.log(this === window);
}
test.call(null); // true
test.apply(undefined); // true
- 在ECMAScript 5的strict模式下，这种情况下的this已经被规定为不会指向全局对象window，而是undefined
function test() {
"use strict";
console.log(this);
}
test(); // undefined
五、缓存this对象在开发中也很常见
// 1.没有缓存this时,this指向window
window.id="window";
document.querySelector('#test').onclick = function(){
console.log(this.id);//test
var fun = function(){
console.log(this.id);
}
fun();//window
}
// 2.缓存this
window.id="window";
document.querySelector('#test').onclick = function(){
var that = this;
var fun = function(){
console.log(that.id);
}
fun();//test
}
// 3.推荐使用call()或apply()
window.id="window";
document.querySelector('#test').onclick = function(){
var fun = function(){
console.log(this.id);
}
fun.call(this);//test
}