es5和es6实现lazyman

es6实现 1 class _LazyMan {
 2   constructor(name) {
 3     this.tasks = [];
 4     this.sleep = this.sleep.bind(this);
 5     this.eat = this.eat.bind(this);
 6     this.tasks.push(((name) => {
 7       return () => {
 8         console.log(‘Hi! This is ‘ + name + ‘!‘);
 9           this.next();
10       }
11    })(name));
12      setTimeout(() => {
13        this.next();
14      }, 0);
15   }
16
17   next() {
18     const fn = this.tasks.shift();
19     fn && fn();
20   }
21   eat(name) {
22     const fn = (() => {
23       return () => {
24         console.log(‘Eat ‘+ name +‘~‘);
25         this.next();
26       }
27     })(name);
28     this.tasks.push(fn);
29     return this;
30   }
31   sleep(time) {
32     const fn = (() => {
33       return () => {
34         setTimeout(() => {
35           console.log(‘Wake up after ‘+ time +‘s!‘);
36           this.next();
37         }, time * 1000);
38       }
39     })(time);
40     this.tasks.push(fn);
41     return this;
42   }
43   sleepFirst(time) {
44     const fn = () => {
45       setTimeout(() => {
46         console.log(‘Wake up after ‘+time+‘s!‘);
47         this.next();
48       },time*1000);
49     }
50     this.tasks.unshift(fn);
51     return this;
52   }
53 }
54
55 const LazyMan = (name) => {return new _LazyMan(name)}
es5实现 1 function _LazyMan(name){
 2     this.tasks=[];
 3     var self=this;
 4     var fn=(function(n){
 5         var name=n;
 6         return function(){
 7             console.log(‘Hi! This is ‘+name+‘!‘);
 8             self.next();
 9         }
10     })(name);
11     this.tasks.push(fn);
12     setTimeout(function(){
13         self.next();
14     },0);
15 }
16
17 _LazyMan.prototype.next=function(){
18     var fn=this.tasks.shift();
19     fn&&fn();
20 }
21 _LazyMan.prototype.eat=function(name){
22     var self=this;
23     var fn=(function(name){
24         return function(){
25             console.log(‘Eat ‘+name+‘~‘);
26             self.next();
27         }
28     })(name);
29     this.tasks.push(fn);
30     return this;
31 }
32 _LazyMan.prototype.sleep=function(time){
33     var self=this;
34     var fn=(function(time){
35         return function(){
36             setTimeout(function(){
37                 console.log(‘Wake up after ‘+time+‘s!‘);
38                 self.next();
39             },time*1000);
40         }
41     })(time);
42     this.tasks.push(fn);
43     return this;
44 }
45 _LazyMan.prototype.sleepFirst=function(time){
46     var self=this;
47     var fn=(function(time){
48         return function(){
49             setTimeout(function(){
50                 console.log(‘Wake up after ‘+time+‘s!‘);
51                 self.next();
52             },time*1000);
53         }
54     })(time);
55     this.tasks.unshift(fn);
56     return this;
57 }
58 //封装
59 function LazyMan(name){
60     return new _LazyMan(name);
61 }
时间: 2025-01-02 03:38:42

es5和es6实现lazyman的相关文章

JavaScript面向对象轻松入门之概述(demo by ES5、ES6、TypeScript)

写在前面的话 这是一个JavaScript面向对象系列的文章,本篇文章主要讲概述,介绍面向对象,后面计划还会有5篇文章,讲抽象.封装.继承.多态,最后再来一个综合. 说实话,写JavaScript面向对象的文章实在是太多了,网上一搜一大堆,很多书里面也介绍的很详细.但作者当初在学习面向对象的时候还是非常困难,特别是在习惯了面向过程编程的情况下,不知道大家有没有这个感受. 作者分析了一下其中的原因,恐怕是因为里面涉及的概念太多:原型.原型链.继承.this.constructor.call等等,这

ES5和ES6中的继承

看到一篇写的非常好的关于js继承的文章,其中对构造函数.原型.实例之间的关系的描述十分透彻,故转载作者文章以随时学习,并供大家共同进步! ES5 ES5中的继承,看图: 1 function Super() {} 2 3 function Sub() {} 4 Sub.prototype = new Super(); 5 Sub.prototype.constructor = Sub; 6 7 var sub = new Sub(); 8 9 Sub.prototype.constructor

JavaScript面向对象轻松入门之多态(demo by ES5、ES6、TypeScript)

多态(Polymorphism)按字面的意思就是"多种状态",同样的行为(方法)在不同对象上有不同的状态. 在OOP中很多地方都要用到多态的特性,比如同样是点击鼠标右键,点击快捷方式.点击桌面空白处.点击任务栏等弹出的菜单都是不同的. 方法重写(override): 即子类定义一个与父类名字相同的方法,以此覆盖父类方法,以此来实现不同的功能. 1 function Animal(){} 2 var AnimalP = Animal.prototype; 3 AnimalP.eat =

JavaScript面向对象轻松入门之封装(demo by ES5、ES6、TypeScript)

本章默认大家已经看过作者的前一篇文章 <JavaScript面向对象轻松入门之抽象> 为什么要封装? 封装(Encapsulation)就是把对象的内部属性和方法隐藏起来,外部代码访问该对象只能通过特定的接口访问,这也是面向接口编程思想的一部分. 封装是面向对象编程里非常重要的一部分,让我们来看看没有封装的代码是什么样的: 1 function Dog(){ 2 this.hairColor = '白色';//string 3 this.breed = '贵宾';//string 4 this

ES5与ES6的研究

今天开始ES5与ES6的研究. 1.什么是ES5与ES6? 就是ECMAScript的第五个版本与第六个版本,那么问题来了,什么是ECMAScript?首先它是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言,又被称为JavaScript,但其实JavaScript是ECMA-262标准的实现与扩展(说了那么多其实它就是JavaScript的一套标准),具体的名字由来及历史可以参照ECMAScript百度百科.

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

ES5和ES6那些你必须知道的事儿(二)

ES5和ES6那些你必须知道的事儿 ES5新增的东西 二.对象方法 1.Object.getPrototypeOf(object) 返回对象的原型 function Pasta(grain, width) { this.grain = grain; this.width = width; } var spaghetti = new Pasta("wheat", 0.2); var proto = Object.getPrototypeOf(spaghetti); console.log

重学ES6(二):ES5和ES6中Class类的相同与不同

ES5和ES6中Class类的相同与不同 先说结论,简而言之ES5用function定义类,ES6用class定义类,class的本质是function,ES6中的类只是语法糖,它并没有改变ES5下类实现的本质. 类的定义 ES5 // ES5函数来描写类 // 声明类 let Animal = function (type) { this.type = type // 定义实例方法 this.drink = function () { console.log('drink') } } // 定

[js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法

es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 1 function Person( uName ){ 2 if ( this instanceof Person ) { 3 this.userName = uName; 4 }else { 5 return new Person( uName ); 6 } 7 } 8 Person.proto