console.log(a)   //a为RHS查询
a = 2    //a 为LHS查询

function foo(a) {      //这里进行了一次  隐式分配值，进行的是LHS查询
    console.log( a ); // 这里是RHS查询
}
foo( 2 );

for (var i=0; i<10; i++) {
    console.log( i );      //i=10   因为 i 会被绑定在外部作用域（函数或全局）中
}

function process(data) {
// 在这里做点有趣的事情
}
// 在这个块中定义的内容因为外部没有引用了所以可以销毁了，这样就避免了使用闭包！
{                                   
    let someReallyBigData = { .. };
    process( someReallyBigData );
}
var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt){
    console.log("button clicked");
}, /*capturingPhase=*/false );

for (let i=0; i<10; i++) {
    console.log( i );
}
console.log( i ); // ReferenceError

var foo = true;
if (foo) {
    var a = 2;
    const b = 3; // 包含在 if 中的块作用域常量
    a = 3; // 正常 !
    b = 4; // 错误 !         因为是  常量
}
console.log( a ); // 3
console.log( b ); // ReferenceError!    创建了块级作用域，所以外部访问不到

var foo = function(){
	console.log( 2 );
};
foo(); // 2   函数声明先提升上去，然后才是变量声明的，变量声明的foo覆盖了函数声明的，所以是2
function foo() {
    console.log( 1 );
}

//第一种传递
function foo() {
    var a = 2;
    function bar() {
        console.log( a );
    }
    return bar;     //将 bar() 函数本身当作一个值类型进行传递
}
var baz = foo();
baz(); // 2 —— 朋友，这就是闭包的效果。

//第二种传递
function foo() {
    var a = 2;
    function baz() {
        console.log( a ); // 2
    }
    bar( baz );  //这里进行了传递
}
function bar(fn) {
    fn(); // 妈妈快看呀，这就是闭包！
}
//把内部函数 baz 传递给 bar ，当调用这个内部函数时（现在叫作 fn ） ，它涵盖的 foo() 内部作用域的闭包就可以观察到了，因为它能够访问 a 。

//第三种传递 -间接
var fn;
function foo() {
    var a = 2;
    function baz() {
        console.log( a );
    }
    fn = baz; // 将 baz 分配给 全局 变量
}
function bar() {
    fn(); // 妈妈快看呀，这就是闭包！
}
foo();
bar(); // 2

//方法一
for (var i=1; i<=5; i++) {
    (function() {           //可以没有参数，因为里边的j可以直接访问外边的i
        var j = i;          //j的作用域赋值为当时的i
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })();
}
//方法二
for (var i=1; i<=5; i++) {
    (function(j) {    //这里必须有参数，因为外边要传i进来给这个，归根结底都是j=i
        setTimeout( function timer() {
            console.log( j );
        }, j*1000 );
    })( i );        //改良版，将i作为参数传进入
}

for (var i=1; i<=5; i++) {
    let j = i; // 是的，闭包的块作用域！
    setTimeout( function timer() {
        console.log( j );
    }, j*1000 );
}
//上边那个变量在循环过程中会声明不止一次，所以进行了调整
for (let i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    
    function doSomething() {
        console.log( something );
    }   
    function doAnother() {
        console.log( another.join( " ! " ) );
    }
    //这里不一定返回一个对象，也可以返回一个函数，jquery就是一个很好的例子
    return {        //这里进行了模块暴露
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();    //每次使用都需要创建一个新的实例 需要加new
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

var foo = (function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }
    function doAnother() {
        console.log( another.join( " ! " ) );
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
})();           //自执行
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

var foo = (function CoolModule(id) {
    function change() {
// 通过内部变量publicAPI来修改公共 API
        publicAPI.identify = identify2;
    }
    function identify1() {
        console.log( id );
    }
    function identify2() {
        console.log( id.toUpperCase() );
    }
    var publicAPI = {
        change: change,
        identify: identify1
    };
    return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

var MyModules = (function Manager() {
    var modules = {};
    function define(name, deps, impl) {    //name 是模块名，deps，是依赖项，impl是模块程序
        for (var i=0; i<deps.length; i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply( impl, deps );   //核心：为了模块的定义引入了包装函数（可以传入任何依赖） ，并且将返回值，也就是模块的 API，储存在一个根据名字来管理的模块列表中。
    }
    function get(name) {
        return modules[name];
    }
    return {
        define: define,
        get: get
    };
})();

MyModules.define( "bar", [], function() {
    function hello(who) {
        return "Let me introduce: " + who;
    }
    return {
        hello: hello
    };
} );
MyModules.define( "foo", ["bar"], function(bar) {
    var hungry = "hippo";
    function awesome() {
        console.log( bar.hello( hungry ).toUpperCase() );
    }
    return {
        awesome: awesome
    };
} );
var bar = MyModules.get( "bar" );
var foo = MyModules.get( "foo" );
console.log(
    bar.hello( "hippo" )
); // Let me introduce: hippo
foo.awesome(); // LET ME INTRODUCE: HIPPO

//bar.js-文件
function hello(who) {
    return "Let me introduce: " + who;
}
export hello;

//foo.js-文件
import hello from "bar";       //导入部分模块，仅从 "bar" 模块导入 hello()
var hungry = "hippo";
function awesome() {
    console.log(
        hello( hungry ).toUpperCase()
    );
}
export awesome;

//baz.js-文件
module foo from "foo";      //导入完整的模块
module bar from "bar";      //导入完整的模块
console.log(
    bar.hello( "rhino" )
); // Let me introduce: rhino
foo.awesome(); // LET ME INTRODUCE: HIPPO

var foo = a => {
    console.log( a );
};
foo( 2 ); // 2

//一般方法
var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;                        //重新定义
        if (self.count < 1) {
            setTimeout( function timer(){       //setTimeout会让内部timer丢失this
                self.count++;
                console.log( "awesome?" );
            }, 100 );
        }
    }
};
obj.cool(); // 酷吧？

//箭头函数
var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( () => { // 箭头函数用当前词法作用域覆盖了this的取值
                this.count++;
            console.log( "awesome?" );
        }, 100 );
        }
    }
};
obj.cool(); // 很酷吧 ?

var obj = {
    count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( function timer(){
                this.count++; // this 是安全的
// 因为 bind(..)
                console.log( "more awesome" );
            }.bind( this ), 100 );           // look,用了 bind()!
        }
    }
};
obj.cool(); // 更酷了。

function foo(){
  var a = 2;
  bar();
}
function bar(){
  console.log(this.a)     //指向window了
}
foo()

function baz() {
// 当前调用栈是：baz
// 因此，当前调用位置是全局作用域
    console.log( "baz" );
    bar(); // <-- bar 的调用位置
}
function bar() {
// 当前调用栈是 baz -> bar
// 因此，当前调用位置在 baz 中
    console.log( "bar" );
    foo(); // <-- foo 的调用位置
}
function foo() {
// 当前调用栈是 baz -> bar -> foo
// 因此，当前调用位置在 bar 中
    console.log( "foo" );
}
baz(); // <-- baz 的调用位置

function foo() {
    console.log( this.a );
}
var a = 2;
(function(){
    "use strict";
    foo(); // 2         //在严格模式下  调用  不影响
})();

function foo() {
    console.log( this.a );
}
var obj = {
    a: 2,
    foo: foo
};
obj.foo(); // 2

function foo() {
    console.log( this.a );
}
var obj = {
    a:2
};
var bar = function() {
    foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬绑定的 bar 不可能再修改它的 this
bar.call( window ); // 2

var bar = function() {
    return foo.apply( obj, arguments );
};
var b = bar( 3 ); // 2 3    这个3是传给arugment

function foo(something) {
    console.log( this.a, something );
    return this.a + something;
}
// 简单的辅助绑定函数
function bind(fn, obj) {
    return function() {             //这里有个函数，是因为要给下边传入argument用的
        return fn.apply( obj, arguments );
    };
}
var obj = {
    a:2
};
var bar = bind( foo, obj );
var b = bar( 3 ); // 2 3
console.log( b ); // 5

function foo(el) {
    console.log( el, this.id );
}
var obj = {
    id: "awesome"
};
// 调用 foo(..) 时把 this 绑定到 obj
[1, 2, 3].forEach( foo, obj );      //forEach  就是其中一种
// 1 awesome 2 awesome 3 awesome

function foo(something) {
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar(3);
console.log( obj1.a ); // 2   硬绑定
console.log( baz.a ); // 3    new绑定

function foo(p1,p2) {
    this.val = p1 + p2;
}
// 之所以使用 null 是因为在本例中我们并不关心硬绑定的 this 是什么
// 反正使用 new 时 this 会被修改
var bar = foo.bind( null, "p1" );       //这一步只是为了传公共/固定参数p1用的
var baz = new bar( "p2" );
baz.val; // p1p2

function foo() {
    console.log( this.a );
}
var a = 2;
foo.call( null ); // 2   忽略后指向window的a

function foo(a,b) {
    console.log( "a:" + a + ", b:" + b );
}
// 把数组“展开”成参数
foo.apply( null, [2, 3] ); // a:2, b:3
// 使用 bind(..) 进行柯里化
var bar = foo.bind( null, 2 );    //预置一个参数
bar( 3 ); // a:2, b:3

function foo(a,b) {
    console.log( "a:" + a + ", b:" + b );
}
// 我们的 DMZ 空对象
var ø = Object.create( null );
// 把数组展开成参数
foo.apply( ø, [2, 3] ); // a:2, b:3
// 使用 bind(..) 进行柯里化
var bar = foo.bind( ø, 2 );
bar( 3 ); // a:2, b:3

function foo() {
    console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2

if (!Function.prototype.softBind) {
    Function.prototype.softBind = function(obj) {
        var fn = this;
// 捕获所有 curried 参数
        var curried = [].slice.call( arguments, 1 );
        var bound = function() {
            return fn.apply(
                (!this || this === (window || global)) ?
                    obj : this
            curried.concat.apply( curried, arguments )
            );
        };
        bound.prototype = Object.create( fn.prototype );
        return bound;
    };
}

function foo() {
    console.log("name: " + this.name);
}
var obj = { name: "obj" },
    obj2 = { name: "obj2" },
    obj3 = { name: "obj3" };
var fooOBJ = foo.softBind( obj );
fooOBJ(); // name: obj
obj2.foo = foo.softBind(obj);
obj2.foo(); // name: obj2 <---- 看！！！
fooOBJ.call( obj3 ); // name: obj3 <---- 看！
setTimeout( obj2.foo, 10 );
// name: obj <---- 应用了软绑定

function foo() {
// 返回一个箭头函数
    return (a) => {
//this 继承自 foo()
        console.log( this.a );
    };
}
var obj1 = {
    a:2
};
var obj2 = {
    a:3
};
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 ！

function foo() {
    setTimeout(() => {
// 这里的 this 在此法上继承自 foo()
        console.log( this.a );
},100);
}
var obj = {
    a:2
};
foo.call( obj ); // 2

var self = this

var myObj = {
    key: value
// ...
};

var myObj = new Object();
myObj.key = value;

var strPrimitive = "I am a string";     //基本类型
typeof strPrimitive; // "string"
strPrimitive instanceof String; // false

var strObject = new String( "I am a string" );      //内置对象
typeof strObject; // "object"
strObject instanceof String; // true

// 检查 sub-type 对象
Object.prototype.toString.call( strObject ); // [object String]

var myArray = [ "foo", 42, "bar" ];
myArray.baz = "baz";
myArray.length; // 3   并不会改变
myArray.baz; // "baz"

//属性名为数字的情况
var myArray = [ "foo", 42, "bar" ];
myArray["3"] = "baz";
myArray.length; // 4     这里变化了，因为属性名是一个像数字的值
myArray[3]; // "baz"

var myObject = {};
Object.defineProperty( myObject, "a", {
    value: 2,
    writable: true,
    configurable: true,
    enumerable: true
} );
myObject.a; // 2

var myObject = {
// 给 a 定义一个 getter
    get a() {       //好像是es6的新语法 文字语法定义getter
        return 2;
    }
};
Object.defineProperty(          //显示定义
    myObject, // 目标对象
    "b", // 属性名
    { // 描述符
// 给 b 设置一个 getter
        get: function(){ return this.a * 2 },
// 确保 b 会出现在对象的属性列表中
        enumerable: true
    }
);
myObject.a; // 2
myObject.b; // 4

var myObject = {
// 给 a 定义一个 getter
    get a() {
        return 2;
    }
};
myObject.a = 3;
myObject.a; // 2

var myObject = {
// 给 a 定义一个 getter
    get a() {
        return this._a_;
    },
// 给 a 定义一个 setter
    set a(val) {
        this._a_ = val * 2;
    }
};
myObject.a = 2;
myObject.a; // 4

var myObject = {
    a:2
};
("a" in myObject); // true
("b" in myObject); // false
myObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "b" ); // false

var myArray = [ 1, 2, 3 ];
for (var v of myArray) {
    console.log( v );
}
// 1
// 2
// 3

var myArray = [ 1, 2, 3 ];
var it = myArray[Symbol.iterator]();
it.next(); // { value:1, done:false }
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { done:true }             //这最后一次调用是为了确认已完成遍历

var myObject = {
    a: 2,
    b: 3
};
Object.defineProperty( myObject, Symbol.iterator, {
    enumerable: false,
    writable: false,
    configurable: true,
    value: function() {
        var o = this;
        var idx = 0;
        var ks = Object.keys( o );
        return {
            next: function() {
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length)
                };
            }
        };
    }
} );
// 手动遍历 myObject
var it = myObject[Symbol.iterator]();
it.next(); // { value:2, done:false }
it.next(); // { value:3, done:false }
it.next(); // { value:undefined, done:true }
// 用 for..of 遍历 myObject
for (var v of myObject) {
    console.log( v );
}
// 2
// 3

class Vehicle {         //类：大家都有的引擎属性
    engines = 1
    ignition() {
        output( "Turning on my engine." );
    }
    drive() {
        ignition();
        output( "Steering and moving forward!" )
    }
}
class Car inherits Vehicle {        //子类：car继承类的引擎，并做了相应的修改和扩展
    wheels = 4
    drive() {
        inherited:drive()           //注：继承原始drive()--相对多态
        output( "Rolling on all ", wheels, " wheels!" )
    }
}
class SpeedBoat inherits Vehicle {      //子类：快艇继承了类的引擎，并做了相应的修改和扩展
    engines = 2
    ignition() {
        output( "Turning on my ", engines, " engines." )
    }
    pilot() {
        inherited:drive()           //注：继承原始drive()--相对多态
        output( "Speeding through the water with ease!" )
    }
}

// 非常简单的 mixin(..) 例子 :
function mixin( sourceObj, targetObj ) {
    for (var key in sourceObj) {
// 只会在不存在的情况下复制               这里其实也是个重点！！关系到显式伪多态call的原因
        if (!(key in targetObj)) {
            targetObj[key] = sourceObj[key];     //浅复制
        }
    }
    return targetObj;
}
var Vehicle = {
    engines: 1,
    ignition: function() {
        console.log( "Turning on my engine." );
    },
    drive: function() {
        this.ignition();
        console.log( "Steering and moving forward!" );
    }
};
var Car = mixin( Vehicle, {
    wheels: 4,
    drive: function() {
        Vehicle.drive.call( this );         //显式多态
        console.log(
            "Rolling on all " + this.wheels + " wheels!"
        );
    }
} );

// 另一种混入函数，可能有重写风险
function mixin( sourceObj, targetObj ) {
    for (var key in sourceObj) {                //重点在这里，他没有进行判断
        targetObj[key] = sourceObj[key];
    }
    return targetObj;
}
var Vehicle = {
// ...
};
// 首先创建一个空对象并把 Vehicle 的内容复制进去
var Car = mixin( Vehicle, { } );
// 然后把新内容复制到 Car 中
mixin( {
    wheels: 4,
    drive: function() {
// ...
    }
}, Car );

// “传统的 JavaScript 类”Vehicle
function Vehicle() {
    this.engines = 1;
}
Vehicle.prototype.ignition = function() {
    console.log( "Turning on my engine." );
};
Vehicle.prototype.drive = function() {
    this.ignition();
    console.log( "Steering and moving forward!" );
};
// “寄生类” Car
function Car() {
// 首先，car 是一个 Vehicle
    var car = new Vehicle();                    //创建了一个子类
// 接着我们对 car 进行定制
    car.wheels = 4;
// 保存到 Vehicle::drive() 的特殊引用
    var vehDrive = car.drive;
// 重写 Vehicle::drive()
    car.drive = function () {                   //进行重写
        vehDrive.call(this);                    //回归绑定
        console.log(
            "Rolling on all " + this.wheels + " wheels!"
        );
        return car;                 //返回了自己的对象，没有使用Car(),所以调用Car()的时候可以不用加new
    }
}
    var myCar = new Car();
    myCar.drive();
// 发动引擎。
// 手握方向盘！
// 全速前进！

var Something = {
    cool: function() {
        this.greeting = "Hello World";
        this.count = this.count ? this.count + 1 : 1;
    }
};
Something.cool();
Something.greeting; // "Hello World"
Something.count; // 1
var Another = {
    cool: function() {
// 隐式把 Something 混入 Another
        Something.cool.call( this );    //重点在这里绑定到Something.cool上了
    }
};
Another.cool();
Another.greeting; // "Hello World"
Another.count; // 1 （count 不是共享状态）

var anotherObject = {
    a:2
};
var myObject = Object.create( anotherObject );
anotherObject.a; // 2
myObject.a; // 2
anotherObject.hasOwnProperty( "a" ); // true
myObject.hasOwnProperty( "a" ); // false
myObject.a++;       // 隐式屏蔽！
anotherObject.a; // 2
myObject.a; // 3
myObject.hasOwnProperty( "a" ); // true

function Foo() {
    // ...
}
Foo.prototype; // { }

function Foo() {
    // ...
}
var a = new Foo();
Object.getPrototypeOf( a ) === Foo.prototype; // true

function Foo() {
    // ...
}
Foo.prototype.constructor === Foo; // true
var a = new Foo();
a.constructor === Foo; // true

function NothingSpecial() {
    console.log( "Don't mind me!" );
}
var a = new NothingSpecial();   构造一个空对象，赋值给a
// "Don't mind me!"
a; // {}

function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; // 创建一个新原型对象
var a1 = new Foo();
a1.constructor === Foo; // false!  因为Foo.prototype的重新赋值，导致丢失constructor，所以会向委托链顶端的Object.prototype查找，所以指向了Object(..)
a1.constructor === Object; // true!

function Foo() { /* .. */ }
Foo.prototype = { /* .. */ }; // 创建一个新原型对象
// 需要在 Foo.prototype 上“修复”丢失的 .constructor 属性
// 新对象属性起到 Foo.prototype 的作用
// 关于 defineProperty(..)，参见第 3 章
Object.defineProperty( Foo.prototype, "constructor" , {     //手动添加
    enumerable: false,
    writable: true,
    configurable: true,
    value: Foo // 让 .constructor 指向 Foo
} );

function Foo(name) {
    this.name = name;
}
Foo.prototype.myName = function() {
    return this.name;
};
function Bar(name,label) {
    Foo.call( this, name );    //Foo.prototype不会一起绑定到this，只绑定了Foo
    this.label = label;
}
// 我们创建了一个新的 Bar.prototype 对象并关联到 Foo.prototype
Bar.prototype = Object.create( Foo.prototype );    //重点在这里
// 注意！现在没有 Bar.prototype.constructor 了
// 如果你需要这个属性的话可能需要手动修复一下它
Bar.prototype.myLabel = function() {
    return this.label;
};
var a = new Bar( "a", "obj a" );
a.myName(); // "a"
a.myLabel(); // "obj a"

// 和你想要的机制不一样！
Bar.prototype = Foo.prototype;
// 基本上满足你的需求，但是可能会产生一些副作用 :(
Bar.prototype = new Foo();

// ES6 之前需要抛弃默认的 Bar.prototype  --轻微性能损失，但是可读性更高，更简短
Bar.ptototype = Object.create( Foo.prototype );
// ES6 开始可以直接修改现有的 Bar.prototype
Object.setPrototypeOf( Bar.prototype, Foo.prototype );

Object.getPrototypeOf( a ) === Foo.prototype; // true
//浏览器在以前就有这个功能，像下边这样
a.__proto__ === Foo.prototype; // true

Object.defineProperty( Object.prototype, "__proto__", {
    get: function() {
        return Object.getPrototypeOf( this );
    },
    set: function(o) {
// ES6 中的 setPrototypeOf(..)
        Object.setPrototypeOf( this, o );
        return o;
    }
} );

//情况1
function Person(name) {
    this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true

//情况2
function Person(name) {
    this.name = name
}
// 重写原型
Person.prototype = {            //prototype被重写，所以p.constructor指向了别处
    getName: function() {}
}
var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // false

if (!Object.create) {
    Object.create = function(o) {
        function F(){}
        F.prototype = o;            
        return new F();
    };
}

var myObject = Object.create( anotherObject, {
    b: {
        enumerable: false,
        writable: true,
        configurable: false,
        value: 3
    },
    c: {
        enumerable: true,
        writable: false,
        configurable: false,
        value: 4
    }
});

var myObject = Object.create( anotherObject );

var anotherObject = {
    cool: function() {
        console.log( "cool!" );
    }
};
var myObject = Object.create( anotherObject );
myObject.doCool = function() {          
    this.cool(); // 内部委托！       重点呦
};
myObject.doCool(); // "cool!"

class Task {
    id;
// 构造函数 Task()
    Task(ID) { id = ID; }
    outputTask() { output( id ); }
}
class XYZ inherits Task {
    label;
// 构造函数 XYZ()
    XYZ(ID,Label) { super( ID ); label = Label; }
    outputTask() { super(); output( label ); }
}
class ABC inherits Task {
// ...
}

Task = {
    setID: function(ID) { this.id = ID; },
    outputID: function() { console.log( this.id ); }
};
// 让 XYZ 委托 Task
XYZ = Object.create( Task );
XYZ.prepareTask = function(ID,Label) {      //隐藏API
    this.setID( ID );
    this.label = Label;
};
XYZ.outputTaskDetails = function() {
    this.outputID();
    console.log( this.label );
};
// ABC = Object.create( Task );
// ABC ... = ...

function Foo() {}
var a1 = new Foo();
a1; // Foo {}        Chrome
a1; //  Object {}    Firefox

function Foo(who) {
    this.me = who;
}
Foo.prototype.identify = function() {
    return "I am " + this.me;
};
function Bar(who) {
    Foo.call( this, who );
}
Bar.prototype = Object.create( Foo.prototype );   //原型继承
Bar.prototype.speak = function() {
    alert( "Hello, " + this.identify() + "." );
};
var b1 = new Bar( "b1" );
var b2 = new Bar( "b2" );
b1.speak();
b2.speak();

Foo = {
    init: function(who) {
        this.me = who;
    },
    identify: function() {
        return "I am " + this.me;
    }
};
Bar = Object.create( Foo );
Bar.speak = function() {
    alert( "Hello, " + this.identify() + "." );
};
var b1 = Object.create( Bar );
b1.init( "b1" );
var b2 = Object.create( Bar );
b2.init( "b2" );
b1.speak();
b2.speak();

// 父类
function Widget(width,height) {
    this.width = width || 50;
    this.height = height || 50;
    this.$elem = null;
}
Widget.prototype.render = function($where){
    if (this.$elem) {
        this.$elem.css( {
            width: this.width + "px",
            height: this.height + "px"
        } ).appendTo( $where );
    }
};
// 子类
function Button(width,height,label) {
// 调用“super”构造函数
    Widget.call( this, width, height );
    this.label = label || "Default";
    this.$elem = $( "<button>" ).text( this.label );
}
// 让 Button“继承”Widget
Button.prototype = Object.create( Widget.prototype );
// 重写 render(..)
Button.prototype.render = function($where) {
// “super”调用
    Widget.prototype.render.call( this, $where );
    this.$elem.click( this.onClick.bind( this ) );
};
Button.prototype.onClick = function(evt) {
    console.log( "Button '" + this.label + "' clicked!" );
};
$( document ).ready( function(){
    var $body = $( document.body );
    var btn1 = new Button( 125, 30, "Hello" );
    var btn2 = new Button( 150, 40, "World" );
    btn1.render( $body );
    btn2.render( $body );
} );

class Widget {
    constructor(width,height) {
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    }
    render($where){
        if (this.$elem) {
            this.$elem.css( {
                width: this.width + "px",
                height: this.height + "px"
            } ).appendTo( $where );
        }
    }
}
class Button extends Widget {
    constructor(width,height,label) {
        super( width, height );
        this.label = label || "Default";
        this.$elem = $( "<button>" ).text( this.label );
    }
    render($where) {
        super( $where );
        this.$elem.click( this.onClick.bind( this ) );
    }
    onClick(evt) {
        console.log( "Button '" + this.label + "' clicked!" );
    }
}
$( document ).ready( function(){
    var $body = $( document.body );
    var btn1 = new Button( 125, 30, "Hello" );
    var btn2 = new Button( 150, 40, "World" );
    btn1.render( $body );
    btn2.render( $body );
} );

var Widget = {
    init: function(width,height){
        this.width = width || 50;
        this.height = height || 50;
        this.$elem = null;
    },
    insert: function($where){
        if (this.$elem) {
            this.$elem.css( {
                width: this.width + "px",
                height: this.height + "px"
            } ).appendTo( $where );
        }
    }
};
var Button = Object.create( Widget );
Button.setup = function(width,height,label){
// 委托调用
    this.init( width, height );
    this.label = label || "Default";
    this.$elem = $( "<button>" ).text( this.label );
};
Button.build = function($where) {
// 委托调用
    this.insert( $where );
    this.$elem.click( this.onClick.bind( this ) );   //拆开理解：click触发this.onClick这个函数，将这个函数绑定到this
};
Button.onClick = function(evt) {
    console.log( "Button '" + this.label + "' clicked!" );
};
$( document ).ready( function(){
    var $body = $( document.body );
    var btn1 = Object.create( Button );
    btn1.setup( 125, 30, "Hello" );
    var btn2 = Object.create( Button );
    btn2.setup( 150, 40, "World" );
    btn1.build( $body );
    btn2.build( $body );
} );

// 父类
function Controller() {
    this.errors = [];
}
Controller.prototype.showDialog(title,msg) {
// 给用户显示标题和消息
};
Controller.prototype.success = function(msg) {
    this.showDialog( "Success", msg );
};
Controller.prototype.failure = function(err) {
    this.errors.push( err );
    this.showDialog( "Error", err );
};
// 子类
function LoginController() {
    Controller.call( this );
}
// 把子类关联到父类
LoginController.prototype =
    Object.create( Controller.prototype );
LoginController.prototype.getUser = function() {
    return document.getElementById( "login_username" ).value;
};
LoginController.prototype.getPassword = function() {
    return document.getElementById( "login_password" ).value;
};
LoginController.prototype.validateEntry = function(user,pw) {
    user = user || this.getUser();
    pw = pw || this.getPassword();
    if (!(user && pw)) {
        return this.failure(
            "Please enter a username & password!"
        );
    }
    else if (user.length < 5) {
        return this.failure(
            "Password must be 5+ characters!"
        );
    }
// 如果执行到这里说明通过验证
    return true;
};
// 重写基础的 failure()
LoginController.prototype.failure = function(err) {
// “super”调用
    Controller.prototype.failure.call(
        this,
        "Login invalid: " + err
    );
};
// 子类
function AuthController(login) {    //这里传入LoginController
    Controller.call( this );
// 合成
    this.login = login;         //这样this.login就有了LoginController的所有数据
}                               //【继承另外一个实例的方法】
// 把子类关联到父类
AuthController.prototype =
    Object.create( Controller.prototype );
AuthController.prototype.server = function(url,data) {
    return $.ajax( {
        url: url,
        data: data
    } );
};
AuthController.prototype.checkAuth = function() {
    var user = this.login.getUser();
    var pw = this.login.getPassword();
    if (this.login.validateEntry( user, pw )) {
        this.server( "/check-auth",{
            user: user,
            pw: pw
        } )
            .then( this.success.bind( this ) )
            .fail( this.failure.bind( this ) );
    }
};
// 重写基础的 success()
AuthController.prototype.success = function() {
// “super”调用
    Controller.prototype.success.call( this, "Authenticated!" );
};
// 重写基础的 failure()
AuthController.prototype.failure = function(err) {
// “super”调用
    Controller.prototype.failure.call(
        this,
        "Auth Failed: " + err
    );
};
var auth = new AuthController();
auth.checkAuth(
// 除了继承，我们还需要合成
    new LoginController()  //这里还是用到了类的集成（所以需要改进）  实例化后的LoginController以参数的形式传给AuthController
);

var LoginController = {
    errors: [],
    getUser: function() {
        return document.getElementById(
            "login_username"
        ).value;
    },
    getPassword: function() {
        return document.getElementById(
            "login_password"
        ).value;
    },
    validateEntry: function(user,pw) {
        user = user || this.getUser();
        pw = pw || this.getPassword();
        if (!(user && pw)) {
            return this.failure(
                "Please enter a username & password!"
            );
        }
        else if (user.length < 5) {
            return this.failure(
                "Password must be 5+ characters!"
            );
        }
// 如果执行到这里说明通过验证
        return true;
    },
    showDialog: function(title,msg) {
// 给用户显示标题和消息
    },
    failure: function(err) {
        this.errors.push( err );
        this.showDialog( "Error", "Login invalid: " + err );
    }
};
// 让 AuthController 委托 LoginController     //这里很重要
var AuthController = Object.create( LoginController );
AuthController.errors = [];
AuthController.checkAuth = function() {
    var user = this.getUser();
    var pw = this.getPassword();
    if (this.validateEntry( user, pw )) {
        this.server( "/check-auth",{
            user: user,
            pw: pw
        } )
            .then( this.accepted.bind( this ) )
            .fail( this.rejected.bind( this ) );
    }
};
AuthController.server = function(url,data) {
    return $.ajax( {
        url: url,
        data: data
    } );
};
AuthController.accepted = function() {
    this.showDialog( "Success", "Authenticated!" )
};
AuthController.rejected = function(err) {
    this.failure( "Auth Failed: " + err );
};

AuthController.checkAuth();

var controller1 = Object.create( AuthController );
var controller2 = Object.create( AuthController );

class Foo {
    methodName() { /* .. */ }
}

var LoginController = {
    errors: [],
                // 并不好使，反词法会介绍
    getUser() { // 妈妈再也不用担心代码里有 function 了！,但是仍然要使用,分隔，但是不需要class语法了
// ...
    },
    getPassword() {
// ...
    }
// ...
};

// 使用更好的对象字面形式语法和简洁方法
var AuthController = {
    errors: [],
    checkAuth() {
// ...
    },
    server(url,data) {
// ...
    }
// ...
};
// 现在把 AuthController 关联到 LoginController
Object.setPrototypeOf( AuthController, LoginController );   //代替Object.create()

var Foo = {
    bar() { /*..*/ },
    baz: function baz() { /*..*/ }
};
//去掉语法糖后
var Foo = {
    bar: function() { /*..*/ },      //缺少函数名
    baz: function baz() { /*..*/ }
};

function Foo() { /* .. */ }
Foo.prototype...
function Bar() { /* .. */ }
Bar.prototype = Object.create( Foo.prototype );
var b1 = new Bar( "b1" );

// 让 Foo 和 Bar 互相关联
Bar.prototype instanceof Foo; // true
Object.getPrototypeOf( Bar.prototype )=== Foo.prototype; // true
Foo.prototype.isPrototypeOf( Bar.prototype ); // true

// 让 b1 关联到 Foo 和 Bar
b1 instanceof Foo; // true
b1 instanceof Bar; // true
Object.getPrototypeOf( b1 ) === Bar.prototype; // true
Foo.prototype.isPrototypeOf( b1 ); // true
Bar.prototype.isPrototypeOf( b1 ); // true

if (a1.something) {
    a1.something();
}

var Foo = { /* .. */ };
var Bar = Object.create( Foo );
Bar...
var b1 = Object.create( Bar );

// 让 Foo 和 Bar 互相关联
Foo.isPrototypeOf( Bar ); // true
Object.getPrototypeOf( Bar ) === Foo; // true

// 让 b1 关联到 Foo 和 Bar
Foo.isPrototypeOf( b1 ); // true
Bar.isPrototypeOf( b1 ); // true
Object.getPrototypeOf( b1 ) === Bar; // true

class c == c.prototype

//问题一
class C {
    constructor() {
// 确保修改的是共享状态而不是在实例上创建一个屏蔽属性！
        C.prototype.count++;               //这样就可以实现实例间的共享了 ，所以最后一行代码才为true
// this.count 可以通过委托实现我们想要的功能
        console.log( "Hello: " + this.count );
    }
}
// 直接向 prototype 对象上添加一个共享状态
C.prototype.count = 0;
var c1 = new C();
// Hello: 1
var c2 = new C();
// Hello: 2
c1.count === 2; // true
c1.count === c2.count; // true

//问题二

class C {
    constructor(id) {
// 噢，郁闷，我们的 id 属性屏蔽了 id() 方法
        this.id = id;
    }
    id() {
        console.log( "Id: " + id );
    }
}
var c1 = new C( "c1" );
c1.id(); // TypeError -- c1.id 现在是字符串 "c1"

//问题三
//许多不同的方法把函数应用在不同的（使用 class 定义的）对象上，每次执行操作时都必须重新绑定 super 。
//你可能需要用 toMethod(..) 来手动绑定super （类似用 bind(..) 来绑定 this） 。
class P {
    foo() { console.log( "P.foo" ); }
}
class C extends P {
    foo() {
        super();
    }
}
var c1 = new C();
c1.foo(); // "P.foo"
var D = {
    foo: function() { console.log( "D.foo" ); }
};
var E = {
    foo: C.prototype.foo
};
// 把 E 委托到 D
Object.setPrototypeOf( E, D );
E.foo(); // "P.foo"


//进行手动绑定--toMethod()方法
var D = {
    foo: function() { console.log( "D.foo" ); }
};
// 把 E 委托到 D
var E = Object.create( D );
// 手动把 foo 的 [[HomeObject]] 绑定到 E，E.[[Prototype]] 是 D， 所以 super() 是 D.foo()
E.foo = C.prototype.foo.toMethod( E, "foo" );
E.foo(); // "D.foo"

// ES6中新加入的类型
typeof Symbol() === "symbol"; // true

var a = null;
(!a && typeof a === "object"); // true

function a(b,c) {
    /* .. */
}
a.length; // 2  参数个数

var a;
a; // undefined   已声明，未赋值
b; // ReferenceError: b is not defined （undeclared） 未声明，未赋值

typeof FeatureXYZ !== "undefined"

function doSomethingCool(FeatureXYZ) {
    var helper = FeatureXYZ ||
        function() { /*.. default feature ..*/ };
    var val = helper();
    // ..
}

var a = [ ];
a[0] = 1;
a["foobar"] = 2;
a.length; // 1      不计算到数组长度
a["foobar"]; // 2   但是可以访问到通过键值
a.foobar; // 2      但是可以访问到通过键值

var a = [ ];
a["13"] = 42;   // 被当做索引，而不是键值
a.length; // 14  长度发生改变