理解JavaScript的call和apply使用情景的最简单直观的例子
2020-02-15 23:05 盛世游侠 阅读(193) 评论(0) 编辑 收藏 举报/* 业务逻辑: 1、如果person见到person,ET见到ET,则相互sayHi; 2、如果person见到ET,则逃跑; 3、如果ET见到person,则吃掉;
ps: 举个这样蹩脚的例子,是想说明:call非常适合用在这种需要解耦代码的情况中,避免同样代码再写一次。
*/ //这个person对象有一个sayHi和run 逃跑方法 function Person(name){ this.type="person"; this.level = 1; this.name=name; }; Person.prototype={ sayHi:function(obj){console.log("hi! "+obj.name)}, run:function(obj){console.log("run! It's " + obj.type)} } //这个ET(外星人)对象也有一个sayHi方法,不过肯定是用外星语打招呼,还有一个把人吃掉的eat方法 function ET(name){ this.type="ET"; this.level = 2; this.name=name; }; ET.prototype = { sayHi:function(obj){console.log("ET language say hi to "+obj.name)}, eat:function(obj){console.log("eating a person! named "+ obj.name)} }; /*
这个someMethod前面加个window,只是为了显式说明someMethod是一个window对象的方法。
它是游戏主控逻辑中的情节判断逻辑,是person对象 和 ET对象 都需要的一段代码,通过使用call可以把它解耦出来。
如果日常工作的业务逻辑中有这种类似的情况,我们可以使用call来解耦。
*/ window.someMethod = function(obj){ if(this.type === obj.type) { this.sayHi(obj); }else{ if(this.level < obj.level){ this.run(obj); }else{ this.type==="ET" ? this.eat(obj) : this.sayHi(obj); } } } var ps_macliu = new Person("macliu"); var ps_tony = new Person("tony"); var et_1 = new ET("ET1"); var et_2 = new ET("ET2"); //人类遇到人类 someMethod.call(ps_macliu, ps_tony); // hi! tony //人类遇到外星人 someMethod.call(ps_macliu, et_1); // run! It's ET //外星人遇到人类 someMethod.call(et_1, ps_macliu); // eating a person! named macliu //外星人遇到外星人 someMethod.call(et_1, et_2); // ET language say hi to ET2