5 years agojavascripta minute read (About 189 words)

Generator

概念

Generator 函数是协程在ES6的实现，最大的特点就是可以交出函数的执行权（即暂停执行）。

function* gen(x) {
    var y = yield x + 2;
    return y;
}

generator函数是一个封装的异步任务。执行：

let g = gen(1);
g.next()// {value: 3, done: false}
g.next()// {value: undefined, done: true}

调用generator函数会返回一个iterator，其next方法会返回一个对象，表示当前阶段的信息，包括value属性(yield语句后面表达式的值)，done表示是否执行完毕。

例子

var fetch = require('node-fetch');

function* gen() {
    var url = 'https://api.github.com/user/github';
    var result = yield fetch(url);//return a Promise
    console.log(result.bio);
}

var g = gen();
var result = g.next();
result.value.then(function(data){
    return data.json();
}).then(function(data))

5 years agojavascripta few seconds read (About 84 words)

implement myCall, myApply, myBind

Show the code directly.

myCall:

Function.prototype.myCall = function(ctx) {
    ctx = ctx || window;
    ctx.fn = this;
    let args = [...arguments].slice(1);
    let result = ctx.fn(...args);
    delete ctx.fn;
    return result;
}

myApply:

Function.prototype.myApply = function(ctx) {
    ctx = ctx || window;
    ctx.fn = this;
    let args = arguments[1];
    let result = ctx.fn(...args);
    delete ctx.fn;
    return result;
}

myBind:

Function.prototype.myBind = function(ctx) {
    let that = this;
    let args = [...arguments].slice(1);
    return function() {//currying
        const newArgs = [...arguments];
        return that.apply(ctx, args.concat(newArgs));
    }
}

5 years agoJavaScript2 minutes read (About 322 words)

Closure in JS(闭包)

A Simple Demo

function A() {
    function B(){
        console.log("Hello closure!");
    }
    return B;
}
var C = A();
C();//Hello closure!

定义普通函数A，
在函数A中定义普通函数B，
函数A返回普通函数B。
在全局中定义C为A执行的结果
执行C

函数A的内部函数B被函数A外的一个变量C所引用

当一个内部函数被其外部函数之外的变量引用时，就形成了一个闭包

A Less Simple Demo

function A() {
    var count = 0;
    function B() {
        count++;
        console.log(count);
    }
    return B;
}

var C = A();
C();//1
C();//2
C();//3

在JavaScript中，如果一个对象不再被引用，那么这个对象就会被GC回收，否则一直保存在内存中

B在A中被定义，因此B依赖于A，而外部变量C引用了B，所以A间接被C引用。

A High-level Demo

(function (document) {
    varviewport;
    varobj = {
        init: function(id) {
           viewport = document.querySelector('#'+ id);
        },
        addChild: function(child) {
            viewport.appendChild(child);
        },
        removeChild: function(child) {
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

(function(){})为一个匿名函数，而()执行。

全局对象window引用了obj，而obj依赖于匿名函数，且操作其viewport，故形成闭包。

让你分分钟理解 JavaScript 闭包

��。

await关键字下面的语句相当于.then()，加入micro-task队列，那么async1函数执行结束，弹出执行栈。

遇到setTimeout()，加入macro-task队列。

接着执行Promise中的executor函数，然后.then()被加入micro-task队列。

然后执行最后的输出，当前宏任务结束。

此时事件循环机制开始工作：然后从micro-task队列中依次执行微任务。

而当await函数后面跟的是一个异步函数的调用(这里我们强调返回值为异步才为异步函数)：

console.log('script start')

async function async1() {
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2 end')
    return Promise.resolve().then(()=>{
        console.log('async2 end1')
    })
}
async1()

setTimeout(function() {
    console.log('setTimeout')
}, 0)

new Promise(resolve => {
    console.log('Promise')
    resolve()
})
.then(function() {
    console.log('promise1')
})
.then(function() {
    console.log('promise2')
})

console.log('script end')

在最新的chrome v8引擎中执行为：

script start
async2 end
Promise
script end
async2 end1
promise1
promise2
async1 end
setTimeout

在这里我们理解为，进入await标记的代码后，将Promise后的首个链式调用注册为micro-task，然后继续执行，直到当前宏任务完成后，微任务也完成后，最后执行await后面的代码，最后再调用其它宏任务。

一个典型的async await的使用为：

async function f() {
  await p
  console.log('ok')
}

我们可以将其简化理解为promise:

function f() {
  return RESOLVE(p).then(() => {
    console.log('ok')
  })
}

『RESOLVE(p)』接近于『Promise.resolve(p)』，不过有微妙而重要的区别：p 如果本身已经是 Promise 实例，Promise.resolve 会直接返回 p 而不是产生一个新 promise。

这里我们复习一下Ajax原生请求：

function search(term, onload, onerror) {
    var xhr, results, ur
    l;
    url = `http://example.com/search?q=${term}`;
    
    xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    
    xhr.onload = function(e) {
        if(this.status===200) {
            results = JSON.parse(this.responseText);
            onload(results);
        }
    };
    xhr.onerror = function(e) {
        onerror(e);
    };
    
    xhr.send();
}

search('Hello World', console.log, console.error);

如果使用Promise对象，可以写成如下:

function search(term) {
    var url =`http://example.com/search?q=${term}`;
    var xhr = new XMLHttpRequest();
    var result;
    xhr.open('GET', url, true);
    var p = new Promise(function(resolve, reject){
       xhr.open('GET', url, true); //async or not
        xhr.onload = function(e) {
            if(this.status===200) {
                result = JSON.parse(this.responseText);
                onload(results);
            }
        }
        xhr.onerror = function(e) {
            reject(e);
        }
        xhr.send();
    });
    return p;
}

search("Hello World").then(console.log, console.error)

5 years agojavascript3 minutes read (About 451 words)

On a deeper understanding about proto and prototype

Last a few days, I just looked through some basic rules about prototype and __proto__. But today when I learnt how to implement the function call() by myself, I found that there’s something unclear.

Function.prototype.myCall = function(ctx) {
    ctx = ctx || window;
    ctx.fn = this;
    let args = [...arguments].slice(1);
    let result = ctx.fn(...args);
    delete ctx.fn;
    return result;
}

How to understand the third line? What does this refer to?

First, let’s recall how we use the function myCall.

Function.prototype.myCall = function(ctx) {
    ctx = ctx || window;
    ctx.fn = this;
    let args = [...arguments].slice(1)
    let result = ctx.fn(...args)
    delete ctx.fn
    return result;
}

function a(x,y) {
    return x+y;
}

const obj = {
    m: 1,
    n: 2,
}

a.myCall(obj, 3,5)

a is a function
a uses its method myCall.

Wait. As far as I’m concerned, only Object can has a method. But how could a function use a method?

So I looked through some information, and a picture can conclude it well.

proto

Everything in JS is Object. Function is an object, Function.prototype is an object. So they all share the same feature: they have a property: __proto__, which is a pointer to its constructor’s prototype.
Function is a special object. Including general properties, it has an extra property: prototype, which has a property named constructor which is the Function itself.

So it’s easy for us to understand:

Function.prototype.myCall = function(ctx) {
    ctx = ctx || window;
    ctx.fn = this;
    console.log(this===a)//true;
    let args = [...arguments].slice(1)
    let result = ctx.fn(...args)
    delete ctx.fn
    return result;
}

function a(x,y) {
    return x+y;
}
console.log(a instanceof Function)//true

const obj = {
    m: 1,
    n: 2,
}

console.log(a.prototype.constructor===a)//true
console.log(a.__proto__===Function.prototype)//true
console.log(a.prototype.__proto__===Object.prototype)//true

a.myCall(obj, 3,5)

So how do we understand the total process of the code?

First we define a method myCall for Function.prototype, then we define a function a, which is inherited from Function.prototype.

In the last line, we make the function a (also an object) call the method myCall. First it look up in a‘s properties, but cannot match, so it backtracks to a.__proto__ AKA Function.prototype. So it finally finds the method, and this refers to the object & function a.

Finally we revise the basic knowledge of prototype chain.

Object.prototype(top of the prototype chain)

Function.prototype inherited from Object.prototype

Function and Object inherited from Function.prototype.

There are some thoughts on the topic which is interestring.

从探究Function.proto===Function.prototype过程中的一些收获

5 years agojavascript2 minutes read (About 271 words)

this, apply, call and bind

What this represents

this means where the current property is from.

What this points to

this points to the object which is the last to calls it.

var name = "windowsName";
function a() {
    var name = "Cherry";

    console.log(this.name);          // windowsName

    console.log("inner:" + this);    // inner: Window
}
a();//window.a()
console.log("outer:" + this)         // outer: Window

var name = "windowsName";
var a = {
    name: "Cherry",
    fn : function () {
        console.log(this.name);      // Cherry
    }
}
a.fn();

var name = "windowsName";
var a = {
    name : null,
    // name: "Cherry",
    fn : function () {
        console.log(this.name);      // windowsName
    }
}

var f = a.fn;
f();

var name = "windowsName";

function fn() {
    var name = 'Cherry';
    innerFunction();
    function innerFunction() {
        console.log(this.name);      // windowsName
    }
}

fn()

Methods to change where this points

Arrow Function

this in arrow function points where the function is defined, instead of conducting.

If there is no this in arrow function, we must find the scope chain to find the value. if a non-arrow function contains the arrow function, this in the arrow function is the this in the non-arrow function, otherwise this is undefined.

var name = "windowsName";

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        setTimeout( () => {
            this.func1()
        },100);
    }

};

a.func2()     // Cherry

_this = this

var name = "windowsName";

var a = {

    name : "Cherry",

    func1: function () {
        console.log(this.name)     
    },

    func2: function () {
        var _this = this;
        setTimeout( function() {
            _this.func1()
        },100);
    }

};

a.func2()       // Cherry

apply, call, bind

apply & call difference:

fun.apply(thisArg, [argsArray])
fun.call(thisArg[, arg1[, arg2[, ...]]])
fun.bind(thisArg[, arg1[, arg2[, ...]]])()

var a = {
    name : "Cherry",

    func1: function () {
        console.log(this.name)
    },

    func2: function () {
        setTimeout(  function () {
            this.func1()
        }.apply(a),100);
    }

};

a.func2()            // Cherry

5 years agojavascript3 minutes read (About 377 words)

js-new

How to understand javascript new operation?

A easy example:

function soldier(ID) {
    var temp_obj = {};// ① new helps us a temp_obj
    temp_obj.__proto__ = soldier.prototype;//② new helps us bind the prototype
    temp_obj.ID = ID;
    temp_obj.life = 42;
    
    return temp_obj;//③ new helps us return the temp_obj;
}

soldier.prototype = {//④ new helps us define "prototype"
    type: "Jiefangjun",
    attack: 5,
    walk: function(){},
    run: function(){},
    attack: function(){},
    defend: function(){},
    die: function(){},
}

Using new, we can prevent doing the following things:

Creating a temporary object (directly using this to visit the temporary object)
Binding prototype (new knows where your prototype is)
Returning temporary object
Giving a name to “prototype”

After we using new :

function soldier(ID) {
    this.ID = ID;
    this.life = 42;
}

soldier.prototype = {
    type: "Jiefangjun",
    attack: 5,
    walk: function(){},
    run: function(){},
    attack: function(){},
    defend: function(){},
    die: function(){},
}

var soldiers = []
for(let i=0; i<100; ++i) {
    soldiers.push(new soldier(i))
}

There is a property named constructor:

soldier.prototype = {
    constructor: soldier
}

So we need to define the property seperatedly.

Implement a new by self

First let’s do a test:

function Test(name) {
  this.name = name
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const t = new Test('cxk')
console.log(t.name) // 'cxk'
t.sayName() // 'cxk'

Test if we return a value in the function:

function Test(name) {
  this.name = name
  return 1
}
const t = new Test('cxk')
console.log(t.name) // 'cxk'

So if we return a value in the function, there is no difference.

Test if we return an object in the function:

function Test(name) {
  this.name = name
  console.log(this) // Test { name: 'yck' }
  return { age: 26 }
}
const t = new Test('yck')
console.log(t) // { age: 26 }
console.log(t.name) // 'undefined'

So if we return an object, the new doesnt effect.

function create(fun, ...args) {
    let obj = {};//create a temp_obj
    Object.setPrototypeOf(obj, fun.prototype)//bind the temp_obj to prototype
    let result = fun.apply(obj, args)//bind obj to construction function
    return result instanceof Object ? result: obj;
}

Then we test function create :

function Test(name, age) {
  this.name = name
  this.age = age
}
Test.prototype.sayName = function () {
    console.log(this.name)
}
const a = create(Test, 'cxk', 21)
console.log(a.name) // 'cxk'
console.log(a.age) // 21
a.sayName() // 'cxk'

5 years ago3 minutes read (About 459 words)

Inheritance and Prototype in js

When it comes to inheritance, there is only one data type in js: object. Every object has a private property named \_proto___ which points to its prototype. The top of the prototype is Object. Object.__proto__ === null

// 让我们从一个函数里创建一个对象o，它自身拥有属性a和b的：
let f = function () {
   this.a = 1;
   this.b = 2;
}
/* 这么写也一样
function f() {
  this.a = 1;
  this.b = 2;
}
*/
let o = new f(); // {a: 1, b: 2}

// 在f函数的原型上定义属性
f.prototype.b = 3;
f.prototype.c = 4;

// 不要在 f 函数的原型上直接定义 f.prototype = {b:3,c:4};这样会直接打破原型链
// o.[[Prototype]] 有属性 b 和 c
//  (其实就是 o.__proto__ 或者 o.constructor.prototype)
// o.[[Prototype]].[[Prototype]] 是 Object.prototype.
// 最后o.[[Prototype]].[[Prototype]].[[Prototype]]是null
// 这就是原型链的末尾，即 null，
// 根据定义，null 就是没有 [[Prototype]]。

// 综上，整个原型链如下: 

// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

function doSomething(){}
console.log( doSomething.prototype );
// 和声明函数的方式无关，
// JavaScript 中的函数永远有一个默认原型属性。
var doSomething = function(){};
console.log( doSomething.prototype );

{
    constructor: ƒ doSomething(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),//return a boolean
        isPrototypeOf: ƒ isPrototypeOf(),//return a boolean on whether inherit
        propertyIsEnumerable: ƒ propertyIsEnumerable(),//是否可枚举
        toLocaleString: ƒ toLocaleString(),//可输出日期等
        toString: ƒ toString(),//
        valueOf: ƒ valueOf()
    }
}

4 ways to lengthen the prototype link

New

function foo() {}
foo.prototype = {
    foo_prop: "foo val"//add a property
}
var proto = new foo //proto.__proto__ = foo.prototype
proto.bar_prop = "bar val"//add a property on proto

function bar() {}
bar.prototype = proto//
var inst = new bar//
console.log(inst.__proto__ === bar.prototype)
console.log(inst.__proto__ === proto)
console.log(bar.prototype === proto)
console.log(proto.__proto__ === foo.prototype)
console.log(proto.__proto__ === foo.prototype)
// inst -> bar.prototype -> proto -> foo.prototype

Object.create

function foo(){}
foo.prototype = {
  foo_prop: "foo val"
};
function bar(){}
var proto = Object.create(
  foo.prototype,
  {
    bar_prop: {
      value: "bar val"
    }
  }
);
bar.prototype = proto;
var inst = new bar;
console.log(inst.foo_prop);//foo val
console.log(inst.bar_prop);//bar val

IE8 unsupported

Object.setPrototypeOf

perform badly

proto

need abandoning

`prototype` 和 `Object.getPrototypeOf`

var a1 = new A(); 
var a2 = new A();
Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething

5 years agojavascripta few seconds read (About 96 words)

Currying

How to implement an add funtion?

function add(x, y) {
    return x+y;
}
add(1, 3)===4//true

How to implement add(1)(3) === 4?

function add(x) {
	return function(y) {
		return x+y;
	}
}

How to implement add3(2) === 5?

function currying(fn, ...args1) {
    return function(...args2) {
        fn(...args1, ...args1);
    }
}

var increment = currying(add, 1);
increment(5)===6//true

How to implement infinite arguments?

function trueCurrying(fn, ...args1) {
    if(args1.length>=fn.length) return fn(...args1);
    return function(...args2) {
        return trueCurrying(fn, ...args1, ...args2);
    }
}

function triAdd(x, y, z) = {
    return x+y+z;
}

var curryAdd = trueCurrying(triAdd);
curryAdd(1,2,3)===6//true;
curryAdd(1,2)(3)===6//true;
curryAdd(1)(2)(3)===6//true;

Generator

概念

例子

implement myCall, myApply, myBind

Closure in JS(闭包)

A Simple Demo

A Less Simple Demo

A High-level Demo

Links

Categories

Recent

Archives

Tags

Subscribe to Updates

On a deeper understanding about proto and prototype

this, apply, call and bind

What this represents

What this points to

Methods to change where this points

Arrow Function

_this = this

apply, call, bind

js-new

Implement a new by self

Inheritance and Prototype in js

4 ways to lengthen the prototype link

New

Object.create

Object.setPrototypeOf

proto

`prototype` 和 `Object.getPrototypeOf`

Currying

Links

Categories

Recent

Archives

Tags

Subscribe to Updates

概念

例子

A Simple Demo

A Less Simple Demo

A High-level Demo

Links

Categories

Recent

Archives

Tags

Subscribe to Updates

What this represents

What this points to

Methods to change where this points

Arrow Function

_this = this

apply, call, bind

Implement a new by self

4 ways to lengthen the prototype link

New

Object.create

Object.setPrototypeOf

__proto__

prototype 和 Object.getPrototypeOf

Links

Categories

Recent

Archives

Tags

Subscribe to Updates

proto

`prototype` 和 `Object.getPrototypeOf`