Javascript call和apply区别及使用方法

  一、方法的定义

  call方法:

  语法:fun.call(thisArg[, arg1[, arg2[, ...]]])

  定义:调用一个对象的一个方法,以另一个对象替换当前对象。

  说明:

  call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisArg 指定的新对象。

  如果没有提供 thisArg参数,那么 Global 对象被用作 thisArg。

  apply方法:

  语法:fun.apply(thisArg[, argsArray])

  定义:应用某一对象的一个方法,用另一个对象替换当前对象。

  说明:

  如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。

  如果没有提供 argArray 和 thisArg 任何一个参数,那么 Global 对象将被用作 thisArg, 并且无法被传递任何参数。

  二、两者区别

  两个方法基本区别在于传参不同

  2.1、call方法:

  

复制代码 代码如下:

  function Product(name, price) {

  this.name = name;

  this.price = price;

  if (price < 0)

  throw RangeError('Cannot create product "' + name + '" with a negative price');

  return this;

  }

  function Food(name, price) {

  Product.call(this, name, price);

  this.category = 'food';

  }

  Food.prototype = new Product();

  function Toy(name, price) {

  Product.call(this, name, price);

  this.category = 'toy';

  }

  Toy.prototype = new Product();

  var cheese = new Food('feta', 5);

  var fun = new Toy('robot', 40);

  2.2、apply方法:

  

复制代码 代码如下:

  function Product(name, price) {

  this.name = name;

  this.price = price;

  if (price < 0)

  throw RangeError('Cannot create product "' + name + '" with a negative price');

  return this;

  }

  function Food(name, price) {

  Product.apply(this, arguments);

  this.category = 'food';

  }

  Food.prototype = new Product();

  function Toy(name, price) {

  Product.apply(this, arguments);

  this.category = 'toy';

  }

  Toy.prototype = new Product();

  var cheese = new Food('feta', 5);

  var fun = new Toy('robot', 40);

  三、作用实例

  3.1、类的继承

  

复制代码 代码如下:

  function Person(name,age){

  this.name = name;

  this.age=age;

  this.alertName = function(){

  alert(this.name);

  }

  this.alertAge = function(){

  alert(this.age);

  }

  }

  function webDever(name,age,sex){

  Person.call(this,name,age);

  this.sex=sex;

  this.alertSex = function(){

  alert(this.sex);

  }

  }

  var test= new webDever(“设计蜂巢”,24,”男”);

  test.alertName();//设计蜂巢

  test.alertAge();//24

  test.alertSex();//男

  3.2、回调函数

  

复制代码 代码如下:

  function Album(id, title, owner_id) {

  this.id = id;

  this.name = title;

  this.owner_id = owner_id;

  };

  Album.prototype.get_owner = function (callback) {

  var self = this;

  $.get(‘/owners/' + this.owner_id, function (data) {

  callback && callback.call(self, data.name);

  });

  };

  var album = new Album(1, ‘设计蜂巢', 2);

  album.get_owner(function (owner) {

  alert(‘The album' + this.name + ‘ belongs to ‘ + owner);

  });