call和apply方法的作用与区别

Shirley~~

于 2022-06-09 11:50:37 发布

阅读量254

点赞数

分类专栏： js学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45866961/article/details/125199873

版权

js学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript中构造函数和原型链的概念，通过实例展示了call()和apply()方法如何在继承中使用，以创建和初始化对象。讨论了这两种方法如何允许一个对象继承另一个对象的属性，而无需为新对象重写方法。

摘要由CSDN通过智能技术生成

call()
call()用来调用给定值和单独提供函数的参数。
call()使用时可以继承另一个对象的属性，而不必为新对象重写该方法。
apply()
apply() 方法调用具有给定值的函数，并以数组（或类似数组的对象）的形式提供。它使用时也可以继承另一个对象的属性，而不必为新对象重写该方法。
例子

function Dog(name,color,age){
		this.name = name;
		this.color = color;
		this.age = age;
	}
	Dog.prototype.run = function () {
		console.log('我可以跑')
 }
  Dog.prototype.eat = function () {
	console.log('我很能吃')
  }
	function Carky(name,color,age,gender){
		this.gender = gender;
		// Dog.call(this,name,color,age);
	}
	// Carky.prototype = new Dog();
	var d1 = new Dog('wangcai','black',12,'female');
	var c1 = new Carky('duomi','write',8,'male');
	
	console.log(d1);//Dog{name:'wangcai',color:'black',age:12}
	console.log(c1);//Carky{gender:'male'}

使用 call() 和 apply()方法时

function Dog(name,color,age){
		this.name = name;
		this.color = color;
		this.age = age;
	}
	Dog.prototype.run = function () {
		console.log('我可以跑')
 }
  Dog.prototype.eat = function () {
	console.log('我很能吃')
  }
	function Carky(name,color,age,gender){
		this.gender = gender;
		Dog.call(this,name,color,age);
	}
	// Carky.prototype = new Dog();
	var d1 = new Dog('wangcai','black',12,'female');
	var c1 = new Carky('duomi','write',8,'male');
	
	console.log(d1);//Dog{name:'wangcai',color:'black',age:12}
	console.log(c1);//Carky{gender:'male'，name:'duomi',color:'write',age:8}

	function Peiqi(name,color,age,gender){
		this.gender = gender;
		Dog.apply(this,[name,color,age]);
	}
	var c2 = new Peiqi('peiqi','pink',6,'female');
	console.log(c2);//Carky{gender:'female'，name:'peiqi',color:'pink',age:6}