从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
来源:互联网 发布:汤姆大叔 javascript 编辑:程序博客网 时间:2024/06/06 00:15
5、简写与this
5.1、简写
Generator函数的写法有三种(除了第一种名字都自己捏的):
- 声明式;
- 赋值式;
- 属性式;
其中,属性式除了常规写法外,还有简写版(就像当函数作为对象属性时的简写一样)。
如代码,一目了然:
// 声明式function *g1() { yield 'g1'}// 赋值式let g2 = function*() { yield 'g2'}// 属性式let foo = { g3: function*() { yield 'g3' }, // 简写的属性式 *g4(){ yield 'g4' }}for (let i of g1()) { console.log(i)}// g1for (let i of g2()) { console.log(i)}// g2for (let i of foo.g3()) { console.log(i)}// g3for (let i of foo.g4()) { console.log(i)}// g4
5.2、this
Generator函数的this指向谁呢?
答案是window,如代码:
function *g1() { console.log(this) yield 'g1'}let foo = g1()foo.next()// Window// {value: "g1", done: false}
由于Generator函数不能通过new来生成遍历器(会报错),因此显然通过这条路来改变this的指向显然是走不通的。
那么如何改变Generator的this指向的目标呢?
答案很简单:
- apply或者call;
- bind
使用bind的示例如下:
function *g1() { console.log(this) yield 'g1'}g1 = g1.bind("g1")let foo = g1()foo.next()// 'g1'// {value: "g1", done: false}
call的示例:
function *g1() { console.log(this) yield 'g1'}let foo = g1.call("g1")foo.next()// 'g1'// {value: "g1", done: false}
遍历器调用更多的方法
遍历器通常只能调用next、throw、return。
假如想调用更多的呢?
简单解决办法是通过原型链来完成,示例如下:
function *g() { yield 'g1'}g.prototype.getDate = function () { return new Date()}let foo = g()foo.getDate()// Tue Aug 22 2017 00:06:26 GMT+0800 (CST)
在遍历器里调用更多方法并且能操作this
简单来说,就是假如我遍历器想要添加count和add两个方法,分别是获取当前计数和对计数增加。
如果分别是独立的,那么很简单,通过上面来完成即可。
但假如需要操作Generator函数内部的变量呢?由于Generator函数不能通过new来生成实例,因此要复杂一些。
具体思路是让Generator函数的this,指向他本身的prototype原型链,于是当调用this的时候,自然相当于this指向了原型链,可以调用原型链上的属性。
如代码:
function Foo() { function *g() { yield 'g1' } g.prototype.number = 0; g.prototype.count = function () { return this.number } g.prototype.add = function (val) { this.number += val; return this.number; } let foo = g.call(g.prototype) return foo;}let bar = new Foo();
另外:
- new Foo与直接Foo()没什么区别,都是返回一个新的Generator遍历器;
- 虽然不能通过new g()来生成,但实质上,通过g()生成的遍历器对象,他们原型链上的number的状态,并不共享(独立的,互不干扰);
阅读全文
0 0
- 从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
- 从零开始学_JavaScript_系列(57)——Generator函数(5)状态机与函数的应用
- 从零开始学_JavaScript_系列(53)——Generator函数(1)基本概念和示例
- 从零开始学_JavaScript_系列(54)——Generator函数(2)简单应用、throw和return
- 从零开始学_JavaScript_系列(55)——Generator函数(3)yield*表达式
- 从零开始学_JavaScript_系列(62)——class(3)setter和getter、Generator、async函数
- 从零开始学_JavaScript_系列(35)——继承与遍历的对照表
- 从零开始学_JavaScript_系列(58)——Thunk函数
- 从零开始学_JavaScript_系列(59)——async函数
- 从零开始学_JavaScript_系列(64)——class的继承(1)基本概念、继承构造函数和class
- 从零开始学_JavaScript_系列(65)——class的继承(2)super、extends与多重继承
- 从零开始学_JavaScript_系列(61)——class(2)私有方法、this
- 从零开始学_JavaScript_系列(18)——dojo(7)(dojo中类的继承)
- 从零开始学_JavaScript_系列(42)——简述js的八种继承方式
- 从零开始学_JavaScript_系列(30)——NodeList
- 从零开始学_JavaScript_系列(32)——事件广播
- 从零开始学_JavaScript_系列(43)——Symbol简述
- 从零开始学_JavaScript_系列(47)——Reflect
- You Don't Know JS: Types & Grammar 总结
- javascript学习记录(二)-function函数的应用之sort()函数详解
- 从零开始学_JavaScript_系列(55)——Generator函数(3)yield*表达式
- 响应式布局学习
- malloc1
- 从零开始学_JavaScript_系列(56)——Generator函数(4)简写,this与继承
- HDU 6166 Senior Pan [二分+SPFA]
- 《运营之光》-- 学习笔记(一)
- Hdu 4389 X mod f(x) 数位DP
- 从零开始学_JavaScript_系列(57)——Generator函数(5)状态机与函数的应用
- solr6.6.0安装部署至tomcat教程
- VS2010编写UDP网络通信程序的问题(借用孙鑫老师《深入VC++》书中程序)
- Pat(A) 1071. Speech Patterns (25)
- canvas day2