菜鸟前端工程师

JavaScript学习笔记014-this指向0Iterato

2018-08-20  本文已影响0人  Mr柳上原

Author:Mr.柳上原

在微信公众号看到一篇文章

感触很深

《在公司里,千万不要骂20多岁的小年轻,因为他们一不爽就不来了》

《但是你们可以使劲骂30岁以后还拿5000左右工资的油腻中年人,因为他们不敢辞职》

或许很残酷

社会真的是这样

说什么------浪子回头金不换,学习永远来得及,什么时候改好都不算晚.....

这些都是假的

社会没那么多时间会给你去改正

一步跟不上

只有被淘汰

你唯一能做的

就是每天都要进步

每天都要学习

每天都比昨天的自己好

这样

或许能有一丝机会

不会被后来者取代

这就是社会

<!DOCTYPE html> <!-- 文档类型:标准html文档 -->

<html lang='en'> <!-- html根标签 翻译文字:英文 -->

<head> <!-- 网页头部 -->

<meat charset='UTF-8'/> <!-- 网页字符编码 -->

<meat name='Keywords' content='关键词1,关键词2'/>

<meat name='Description' content='网站说明'/>

<meat name='Author' content='作者'/>

<title>前端59期学员作业</title> <!-- 网页标题 -->

<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->

<style type='text/css'> /*内部样式表*/

</style>

</head>

<body> <!-- 网页主干:可视化区域 -->

<script>

/*
函数的this指向:看函数的调用,谁调用就指向谁
主动执行调用函数:
call // call传递的实参是一个个值
apply // apply传递的实参是一个数组

不主动执行调用函数:
bind // 不兼容低版本IE

第一个参数为修改的this指向的对象,函数的实参依次写在第一个参数的后面
*/

var a = 1;
var obj = {
a: 2
}
function fn(a, b, c){
console.log(this.a);
}
fn.call(obj, 1, 2, 3); // this指向变为obj
fn.apply(obj, [1, 2, 3]); // this指向变为obj
fn.bind(obj, 1, 2, 3)( ); // this指向变成obj
document.onclick = fn.bind(obj, 1, 2, 3); // 右边不主动执行

// 定时器传参
setTimeout(fn.bind(null, 1, 2, 3), 1000); // 不需要指向时,可以null
setTimeout("fn(1, 2, 3)", 1000); // 第二种传参方法,字符串不会主动执行
setTimeout("fn.call(null, 1, 2, 3)", 1000); // 需要修改指向时

// 函数的this指向
Function.prototype.bind = function (){
console.log(this); // this指向调用它的函数
return function (){ 
fn();
};
}
function fn(){ };
fn.bind(); // fn调用bind
fn.bind()(); // 执行的是return出来的匿名函数,匿名函数里的fu自执行,看起来如同fn执行

// 类数组转数组
function (){
Array.prototype.slice.call(arguments);
}
fn(1, 2, 3, 4, 5, 6, 7);

/*
iterator:一种接口,用于遍历数据结构
具备iterator接口的对象:
能被 for of
能被 ...
原生具备iterator接口的数据结构:
Array
Map
Set
String
函数的arguments对象
NodeList对象
*/
// 遍历流程
let arr =["a", "b", "c"];
let iter = arr[Symbol.iterator]( );
iter.next( ) // {value: "a", done: false}
iter.next( ) // {value: "b", done: false}
iter.next( ) // {value: "c", done: false}
iter.next( ) // {value: undefined, done: true}

// 原生实现iterator
function myIter(arr){
let i = 0;
return {
next( ){
let done = (i >= arr.length);
let value = !done ? arr[i++] : undefined;
return {
value,
done,
}
}
}
}

/*
generator:惰性函数
必须用iterator接口调用
调用一次,返回一次yield的值
*/
// generator的写法
function* fn( ){ // 一次执行可以返回多个值,有多少个yield就可以返回几个值
yield console.log(1); // 暂停
yield console.log(2);
return console.log(3);
}
let iter = fn( );
iter.next( ); // 1
iter.next( ); // 2
iter.next( ); // 3
// for of输出
for(let key of iter){ } // 1, 2, 3

// generator的注意
function* foo(x){
var y = 2 * (yield (x + 1)); // yield返回值后默认变成undefined
var z = yield (y / 3);
return (x + y + z);
}

var a = foo(5);
a.next( ); // 6
a.next( ); // NaN
a.next( ); // NaN

var b = foo(5);
b.next( ); // 6
b.next(6); // 4
b.next(4); // 21

// generator函数调用
function* foo(){
yield 1;
yield 2;
}
function* too(){
yield 3;
yield 4;
yield* foo( ); // 同类型generator函数调用方法
}
for (let key of too){
console.log(key); // 3, 1, 2, 4
}

</script>

</body>

</html>

上一篇下一篇

猜你喜欢

热点阅读