uithen / blog Goto Github PK

// 初始化Modal
var modal = new Modal({
    // 1. 内容配置
    content: '自定义内容', // 可传入节点和字符串
    // 2. 确认与取消按钮回调,以便开发者对后续逻辑的处理
    onConfirm() {
        console.log('确认')
    },
    onCancel() {
        console.log('取消')
    }
})
// 接口调用
modal.show(/*可传入content,即自定义内容*/)
modal.hide()

// 先写出Modal的骨架

function Modal(option) {
 // 初始化逻辑
}
Modal.prototype.show = function() {
 // 展示逻辑
}
Modal.prototype.hide = function() {
 // 隐藏逻辑
}

// 辅助函数
// -------

// 将HTML转换为节点
function html2node(str) {
    var container = document.createElement('div')
    container.innerHTML = str 
    return container.children[0] //将下列template字符串转换为node
}
// 拓展属性(用于往原型上添加属性)
 // extend: {x:1},{a:1, b:2} ==> {x:1,a:1,b:2},注意不是覆盖,跟assign不一样!
function extend(o1, o2) {
    for (var p in o2) if (typeof o1[p] === 'undefined') {
        o1[p] = o2[p]
    }
    return o1 
}
// 结构
var template = `
    <div class="m-modal">
        <div class="modal_align"></div>
        <div class="modal_wrap">
            <div class="modal_head">标题</div>
            <div class="modal_body">内容</div>
            <div class="modal_foot">
                <a href="#" class="confirm">确认</a>
                <a href="#" class="cancel">取消</a>
            </div>
        </div>
    </div>
`

// Modal主逻辑
// -----

function Modal(options) {
    options = options || {}
    // 由于_layout设置在了原型上的,会导致所有实例共享,所以在这初始化的时候做了克隆处理,以保证每个实例拥有自己的container
    this.container = this._layout.cloneNode(true)
    this.body = this.container.querySelector('.modal_body') 
    this.wrap = this.container.querySelector('.modal_wrap') 
    console.log(this._layout)
    // 拓展实例属性
    extend(this, options)

    this._initEvent()
}

// 拓展原型属性
extend(Modal.prototype, {
    // modal结构渲染
    _layout: html2node(template),
    // modal内容区配置,支持传入字符串和DOM节点两种格式
    setContent(content) {
        if (!content) {
            return
        }
        if (content.nodeType === 1) {
            this.body.innerHTML = ''
            this.body.appendChild(content)
        } else {
            this.body.innerHTML = content
        }
    },
    // 显示弹窗
    show(content) {
        if (content) {
            this.setContent(content)
        }
        document.body.appendChild(this.container)
    },
    // 隐藏弹窗
    hide() {
        document.body.removeChild(this.container)
    },
    // 初始化事件
    _initEvent() {
        this.container.querySelector('.confirm').addEventListener('click', this._onConfirm.bind(this))
        this.container.querySelector('.cancel').addEventListener('click', this._onCancel.bind(this))
    },
    _onConfirm() {
        this.onConfirm()
        this.hide()
    },
    _onCancel() {
        this.onCancel()
        this.hide()
    }
})

function animateClass(node, className, callback) {
 function onAnimationEnd() {
  // 2.移除类名
  delClass(node, className)
  node.removeEventListener('animationend', onAnimationEnd)
  // 3.执行回调
  callback && callback()
 }
 // 1.添加类名触发animation
 addClass(node, className)
 node.addEventListener('animationend', onAnimationEnd)
}

// 逻辑解耦,不需要显式的传入
var modl = new Modal()
// 并且支持多回调逻辑
modal.on('confirm', function() {
 console.log('confirm')
});
modal.on('confirm', function() {
 console.log('confirm2')
});
// 还可动态绑定、解绑
modal.on('confirm', fn1)
modal.on('confirm', fn2)
modal.off('confirm', fn1)


_onConfirm: function() {
 // this.onConfirm()
// Modal不在耦合于onConfirm参数
 this.emit('confirm')
 this.hide()
}

var emitter = {
 // 注册事件
 on:function(event, fn){},
 // 解绑事件
 off:function(event, fn){},
 // 触发事件
 emit:function(event){}
}

// 使用混入Mixin的方式使得Modal具有事件发射器功能
extend(Modal.prototype, emitter)

  // 皇帝,一国之主,有且只有一个
  function Emperor() {
   this.name = '皇帝';
   this.id = Math.floor(Math.random() * 10);
  }
  Emperor.prototype.say = function() {
   console.log(this.name + this.id + ' : 择日再议');
  };
  // 大臣,国之栋梁,多多益善
  function Minister(name) {
   this.name = name;
  }
  Minister.prototype.say = function() {
   console.log(this.name + ': 陛下,臣附议!')
  };


  // 对某国事,三名大臣集体附议
  var m1 = new Minister('张大人');
  var e1 = new Emperor();
  m1.say(); 
  e1.say();	//每次皇帝的id都不一样
  var m2 = new Minister('李大人');
  var e2 = new Emperor();
  m2.say(); 
  e2.say();	//每次皇帝的id都不一样
  var m3 = new Minister('王大人');
  var e3 = new Emperor();
  m3.say(); 
  e3.say();	//每次皇帝的id都不一样

  // 皇帝,一国之主,有且只有一个
  function Emperor() {
   this.name = '皇帝';
   this.id = Math.floor(Math.random() * 10);
   // 保存着Emperor的实例
   this.instance = null;
  }
  //注意这里,方法是定义在函数上而不是原型上
  Emperor.getInstance = function() {
    console.log(this) // --> Emperor {name: "king", id: 1, instance: null}
   // 首次进入,实例化Emperor,并返回
   if(!this.instance) {
    this.instance = new Emperor();
   }
   return this.instance;
  };
  Emperor.prototype.say = function() {
   console.log(this.name + this.id + ' : 择日再议');
  };
  // 大臣,国之栋梁,多多益善
  function Minister(name) {
   this.name = name;
  }
  Minister.prototype.say = function() {
   console.log(this.name + ': 陛下,臣附议!');
  };


  // 对某国事,三名大臣集体附议
  var m1 = new Minister('张大人');
  var e1 = Emperor.getInstance();
  m1.say(); 
  e1.say();	// 每次输出一致,保存了第一次的id
  var m2 = new Minister('李大人');
  var e2 = Emperor.getInstance();
  m2.say(); 
  e2.say();	// 每次输出一致,保存了第一次的id
  var m3 = new Minister('王大人');
  var e3 = Emperor.getInstance();
  m3.say(); 
  e3.say();	// 每次输出一致,保存了第一次的id

  // 皇帝,一国之主,有且只有一个
  function Emperor() {
   this.name = '皇帝';
   this.id = Math.floor(Math.random() * 10);
  }
  Emperor.getInstance = (function() {
   var instance = null;
   return function() {
    if(!instance) {
     instance = new Emperor();
    }
    return instance;
   };
  })();
  Emperor.prototype.say = function() {
   console.log(this.name + this.id + ' : 择日再议');
  };
  // 大臣,国之栋梁,多多益善
  function Minister(name) {
   this.name = name;
  }
  Minister.prototype.say = function() {
   console.log(this.name + ': 陛下,臣附议!');
  };


  // 对某国事,三名大臣集体附议
  var m1 = new Minister('张大人');
  var e1 = Emperor.getInstance();
  m1.say(); 
  e1.say();	// 每次输出一致,保存了第一次的id
  var m2 = new Minister('李大人');
  var e2 = Emperor.getInstance();
  m2.say(); 
  e2.say();	// 每次输出一致,保存了第一次的id
  var m3 = new Minister('王大人');
  var e3 = Emperor.getInstance();
  m3.say(); 
  e3.say();	// 每次输出一致,保存了第一次的id

  // 皇帝,一国之主,有且只有一个
  var Emperor = (function() {
    var instance = null;
    // 与全局的Emperor没有任何关系
    function Emperor() {
     if(instance) {
      return instance;
       }
     this.name = '皇帝';
     this.id = Math.floor(Math.random() * 10);
     return instance = this;
       }
    Emperor.prototype.say = function() {
      console.log(this.name + this.id + ': 择日再议!');
        };
    return Emperor;
   })();

  // 大臣,国之栋梁,多多益善
  function Minister(name) {
   this.name = name;
  }
  Minister.prototype.say = function() {
   console.log(this.name + ': 陛下,臣附议!');
  };


  // 对某国事,三名大臣集体附议
  var m1 = new Minister('张大人');
  var e1 = new Emperor();
  m1.say(); 
  e1.say();	// 每次输出一致
  var m2 = new Minister('李大人');
  var e2 = new Emperor();
  m2.say(); 
  e2.say();	// 每次输出一致
  var m3 = new Minister('王大人');
  var e3 = new Emperor();
  m3.say(); 
  e3.say();	// 每次输出一致

        // 事件注册
        var addEvent = document.addEventListener ? 
            function(elem, type, listener, useCapture) {
                elem.addEventListener(type, listener, useCapture);
            } :
            function(elem, type, listener, useCapture) {
             // 注意此处type(事件处理程序名)与参数(没有捕获阶段,因此只有两个参数)跟W3C标准的区别
                elem.attachEvent('on' + type, listener);   
            };

        // 取消事件注册
        var delEvent = document.addEventListener ? 
            function(elem, type, listener, useCapture) {
                elem.removeEventListener(type, listener, useCapture);
            } :
            function(elem, type, listener, useCapture) {
                elem.detachEvent('on' + type, listener);
            };    

  var eventUtil = {
   // 事件注册
   addEvent: function(elem, type, listener, useCapture) {
    if(elem.addEventListener) {
     elem.addEventListener(type, listener, useCapture);
    } else {
     elem.attachEvent('on' + type, listener);
    }
   },

   delEvent: function(elem, type, listener, useCapture) {
    if(elem.removeEventListener) {
     elem.removeEventListener(type, listener, useCapture);
    } else {
     elem.detachEvent('on' + type, listener);
    }
   },

   // 事件对象
   preventDefault: function(event) {
    event = event || window.event;
    if(event.preventDefault) {
     event.preventDefault();
    } else {
     event.returnValue = false;
    }
   },

   stopPropagation: function(event) {
    event = event || window.event;
    if(event.stopPropagation) {
     event.stopPropagation();
    } else {
     event.cancelBubble = true;
    }
   },

   getTarget: function(event) {
    event = event || window.event;
    return event.target || event.srcElement;
   }
  };

  document.querySelector('#ul').addEventListener('click', function(e) {
   alert(e.target.id);
  });

  var name = 'window';
  var obj = {
   name: 'obj'
  }
  function foo() {
   console.log(this.name);
  }
 // 下面两行代码对函数的调用,本质是没区别的
  foo();	// 'window'
  foo.call();	// 'window'
  // 使用传入参数,改变this值
  foo.call(obj);	// 'obj'

  function Person(name, age) {
   this.name = name;
   this.age =age;
  }

  // 新建一个空对象
  var obj = {};
  // 会让Person里的所有this全都指向obj
  Person.call(obj,'J',18);
  console.log(obj);	// {name: "J", age: 18}
  obj.hasOwnProperty('age');	// true

  // 解析Person.call(obj,'J',18):
  // 1. Person.call()调用的时候会把第一个参数(this)的作用域设置为指定的对象,这里为obj
  // 2. Person函数里有this,此时Person作为构造函数他的this不再仅仅属于实例了,作为函数,他的this也不再仅仅属于全局了
  // 3. 因为传入了obj作为其参数,Person.call()调用时,Person里的this更替为obj
  // 4. 后面的参数即为实参,与形参一一对应
  // 相当于: 
  // Person.call(obj,'J',18);Person执行时,Person内部有如下变化: 
  // Function Person(name, age) {
  // var this = obj;	// 但是Person本身和他的实例还是拥有此this,只不过obj可以借用
  // obj.name = name;
  // obj.age = age;
  // }

  // A写的某个功能函数
  function Person(name,sex) {
   this.name = name;
   this.sex = sex;
  }
  // B在A写的函数基础上(B函数涵盖A所有的功能)在新增一些功能(tel,grade)
  // 此时就可以利用call来完成
  function Stu(name, sex, tel, grade) {
   this.tel = tel;
   this.grade = grade;
   // 由于new的缘故,此时this指向的就是Stu,而Stu又借用Person的方法来实现自己的功能
   Person.call(this, name,sex);
  }
  var stu = new Stu('J', 'female', 26, 2020);
  // Person.call(this, name,sex); 这条语句代表的是Person函数一定会执行,然后才是使用第一个参数改变this指向

  // 轮胎车间
  function Wheel(size, style) {
   this.size = size;
   this.style = style;
  }
  // 座椅车间
  function Sit(color, comf) {
   this.color = color;
   this.comf = comf;
  }
  // 模型车间
  function Model(len, width, height) {
   this.len = len;
   this.width = width;
   this.height = height;
  }
  // 组装成成品车
  function Car(len, width, height,color, comf,size, style) {
  // 自己内部什么功能都没有,全是借由别人的 
   // 把Wheel填装进来 
   Wheel.apply(this, [size, style])
   // 把Sit填装进来 
   Sit.apply(this, [color, comf])
   // 把模型填装进来 
   Model.apply(this, [len, width, height])
  }
  // 借用别人的功能来实现自己的方法
  var audi = new Car(3000, 1500, 1500, 'red', 'soft', 100, 'SUV'); 
  // Car {size: 100, style: "SUV", color: "red", comf: "soft", len: 3000, …}

        function foo() {
            var x = y = 1;
        }
        foo();
        console.log(x); // 报错
        console.log(y); // 由于JS语法错误会影响后续代码终止,所以不会执行到该行

        function foo() {
        //  var x = y = 1;
            var x;
            y = 1;
            x = 1;
        }

var x =1; // var声明的全局x
y = 1; // 没有通过声明的y
delete x; // false,不能删除
delete y; // true 可以删除

var x;
Object.getOwnPropertyDescriptor(window,x);
 // {value: undefined, writable: false, enumerable: false, configurable: false}

        var a = {n: 1};
        var b = a;
        a.x = a = {n: 2};
        console.log(a.x);
        console.log(b.x);

        // 1. 有一个对象`a`,将`a`复制给对象`b`,此时它们引用同一对象
        var a = {n: 1};
        var b = a;
        // 2. 连等赋值,从右至左,发现`a`被重写了,指向另一个对象{n:2}
        a = {n: 2};
        // 3. 同时`a`有个属性`x`指向对象{n:2}
        a.x = {n: 2};
        // 4. 输出
        console.log(a.x); // {n:2}
        console.log(b.x); // undefined

   a --> {
    n: 2
   }

   a.x --> undefined // 对象a里没有名为x的属性

   b --> {
    n: 1,
    x: {n: 2}
   }

var x = 1;
function foo() {
 if(!x) {
  var x = 2;
 }
 console.log(x); // 2
}
foo();

var a = 1; // 全局变量a
function foo() {
            var a = 2; // 局部变量a,定义在了foo函数里,只能在该函数里访问
            b = 1; // 全局变量,尽管定义在foo函数里,但是未使用var关键字声明
            console.log(a); 
            console.log(b); 
        }; 
foo();
console.log(a); 

var a = 1;
function foo(){alert(1)};
console.log(a); // 1
console.log(foo()); // 1

console.log(window.a); // 1
console.log(window.foo()); // 1

a === window.a // true
foo === window.foo // true

var person = 'xiaoA';
function foo() {
 var person = 'xiaoB';
 var age = 18;
 function bar() {
  var person = 'xiaoC';
  var sex = 'female';
  console.log(person); // xiaoC
  console.log(sex); // female
  console.log(age); // 18
 }
 return bar();
}

var x = 1;
function foo() {
 if(!x) {
  var x = 2;
 }
 console.log(x); // 2
}
foo();

预解析(在代码执行前JS引擎在后台就已经处理完了),
1. 初始化全局环境:
var x;
function foo(){}; 
x=10;
2. 执行foo(),初始化foo()的局部环境:
function foo() {
       var x;
       //JS中只有函数作用域,不存在块级作用域,所以这里面的x其实是个局部变量
 if(!x) { // !x ==>!undefined ==> true
  var x = 2; // x = 2
 }
 console.log(x); // 2
}
3. 执行完毕,打印2

var x = 1;
function fn() {
    if(x) { // undefined ==> false
        var x = 2; // 条件不成立,所以根本就不会执行到if语句的代码块里,也就是说这段代码不会执行
    }
console.log(x);  
}
fn(); // undefined

// JS没有块级作用域,在JS里,函数里的{}是叫作函数体,而if,else,while这些{}才叫作block（代码块）
var a = true;
if(a) {
var b = 1;
}
// 如果有块级作用域这里b会报错,实际上
console.log(b); // 1

function foo() {
var d = 1;
}
console.log(d); // 报错,未定义

var x = 1;
function foo() {
 console.log(x);
 x = 2;    // 没有用var声明,即x为外部那个全局x
}
foo();	// 1
console.log(x);	// 2

var x = 1;
function foo(x) {
 console.log(x); // 函数的参数x,尽管foo()调用的时候没有传参,但是之前我们说过函数的参数也是局部变量,在函数体里也就是相当于var声明的,需要预解析(初始化为undefined)所以此条其实是undefined
 x = 2; // 修改局部x为2
}
foo();	// undefined
console.log(x);	// 1

var x = 1;
function foo(x) {
 console.log(x); // 全局x,foo调用的时候传了进来
 x = 2; // 执行到这句时,这个x其实是参数x,为局部变量
}
foo(x);	// 1
console.log(x);	// 1

var x = 1;
function foo() {
 console.log(x);
 var x = 2;
}
foo();	// undefined
console.log(x);	// 1

console.log(a); // undefined
var a = 1;

// console.log(a); // undefined
// var a = 1;
以上两行代码的预解析过程：
var a; // 把用var声明的变量，提升到该作用域顶部(此行代码我们是看不见摸不着的，js在后台处理。只作提升，不作赋值)
console.log(a);     // undefined
a = 1; 

// console.log(a); 
// function a() {}
以上两行代码的预解析过程：
function a() {}    // 1. function a() {} 只提升声明,不会调用
console.log(a);     // 2. 按正常流执行代码,输出结果

console.log(a); // function a() {}
var a = 1;
function a() {}

console.log(a); // function a() {}
var a = 1;
function a() {}
console.log(a); // 1

js预解析过程：
1. var a; // 变量声明提升,此时为undefined
2. function a() {}; // 函数声明提升
预解析完成,按顺序逐步执行原代码:
3. console.log(a); // 标识符相同,由于函数声明高于变量声明,此时a为function a() {}
4. a =1; // 赋值操作,a为1
5. console.log(a); //1

console.log(a); // 报错,a未定义
a = 1;

  f1();
  console.log(c);
  console.log(b);
  console.log(a);
  function f1() {
   var a = b = c =9; // 这段相当于 var a = 9; b = 9; c = 9; b与c为全局变量
   console.log(a);
   console.log(b);
   console.log(c);
  }
  // 输出 :9 9 9 9 9 报错 
  
  // 执行前,JS引擎解析如下:
  function f1() {
   var a;
   a =b =c = 9;
   var a = b = c =9; 
   console.log(a);
   console.log(b);
   console.log(c);
  }
  f1();
  console.log(c);
  console.log(b);
  console.log(a);

var x = 1;
function foo() {
 if(!x) {
  var x = 2;
 }
 console.log(x);
}
foo(); // 此时x的值为?

  var obj1 = {};
  var obj2 = {};
  obj1 == obj2; // false

  // 便于使用,把类似获取id,标签名的方法封装成函数
  function getId(id) {
   return document.getElementById(id);
  }

  function getTag(tag) {
   return document.getElementsByTagName(tag);
  }

  // 我的命名空间
  var Zayne = {};
  Zayne.getId = function() {};
  ...
  ...
  ...
  // 对方的命名空间
  var You = {};
  You.getId = function() {};

   // 我的命名空间
   var Zayne = {};
   // dom相关的子命名空间
   Zayne.dom = {};
   Zayne.dom.getId = function() {};

   // 字符换相关的子命名空间
   Zayne.string = {};
   Zayne.string.trim = function() {}

   // 正则相关的子命名空间
   Zayne.reg = {};
   Zayne.reg.tel = ...//..

// 创建弹窗
var loginLayer = (function () {
    var loginLayer = document.createElement('div');
    loginLayer.id = 'loginLayer';
    loginLayer.innerHTML = '登录窗口';
    loginLayer.style.display = 'none';
    document.body.appendChild(loginLayer);
    return loginLayer;
})();
// 创建遮罩层
var maskLayer = (function () {
    var maskLayer = document.createElement('div');
    maskLayer.id = 'maskLayer';
    maskLayer.style.display = 'none';
    document.body.appendChild(maskLayer);
    return maskLayer;
})();
// 点击按钮显示弹窗和遮罩
document.getElementById('loginBtn').addEventListener('click', function () {
    loginLayer.style.display = 'block';
    maskLayer.style.display = 'block';
});

// 创建弹窗
function createLoginLayer() {
    var loginLayer = document.createElement('div');
    loginLayer.id = 'loginLayer';
    loginLayer.innerHTML = '登录窗口';
    loginLayer.style.display = 'none';
    document.body.appendChild(loginLayer);
    return loginLayer;
}
// 创建遮罩层
function createMaskLayer() {
    var maskLayer = document.createElement('div');
    maskLayer.id = 'maskLayer';
    maskLayer.style.display = 'none';
    document.body.appendChild(maskLayer);
    return maskLayer;
}
// 显示弹窗和遮罩
document.getElementById('loginBtn').addEventListener('click', function (e) {
    // 当我们点击登录按钮时,才会创建结构
    var loginLayer = createLoginLayer();
    var maskLayer = createMaskLayer();
    loginLayer.style.display = 'block';
    maskLayer.style.display = 'block';
});

// 创建弹窗
var createLoginLayer = (function () {
    // 保持单一实例的变量
    var loginLayer = null;
    return function () {
        if (!loginLayer) {
            loginLayer = document.createElement('div');
            loginLayer.id = 'loginLayer';
            loginLayer.innerHTML = '登录窗口';
            loginLayer.style.display = 'none';
            document.body.appendChild(loginLayer);
        }
        return loginLayer;
    };
})();

// 创建遮罩层
var createMaskLayer = (function () {
    var maskLayer = null;
    return function () {
        if (!maskLayer) {
            maskLayer = document.createElement('div');
            maskLayer.id = 'maskLayer';
            maskLayer.style.display = 'none';
            document.body.appendChild(maskLayer);
        }
        return maskLayer;
    }
})();
// 显示弹窗和遮罩
document.getElementById('loginBtn').addEventListener('click', function (e) {
    // 第一次进入创建结构,第一次之后,结构都存在直接返回,不会重复创建结构
    var loginLayer = createLoginLayer();
    var maskLayer = createMaskLayer();
    loginLayer.style.display = 'block';
    maskLayer.style.display = 'block';
});

  // 专门负责创建结构的函数
  function createLoginLayer() {
   var loginLayer = document.createElement('div');
   loginLayer.id = 'loginLayer';
   loginLayer.innerHTML = '登录窗口';
   loginLayer.style.display = 'none';
   document.body.appendChild(loginLayer);
   return loginLayer;
  }
  function createMaskLayer() {
   var maskLayer = document.createElement('div');
   maskLayer.id = 'maskLayer';
   maskLayer.style.display = 'none';
   document.body.appendChild(maskLayer);
   return maskLayer;
  }
  // 保证单例的函数
  function getSingleton(fn) {
   var instance = null;
   return function() {
    // return instance || (instance = fn());
    // 如果在功能上有更多需求,希望调用getSingleton()之后返回的函数可以传递参数,可以向下面这样写,也就是说这样fn也可以接收参数了
    return instance || (instance = fn.apply(null, arguments));
   };
  }

  // 生成单一节点
  var createSingletonLoginLayer = getSingleton(createLoginLayer);
  var createSingletonMaskLayer = getSingleton(createMaskLayer);

  document.querySelector('#loginBtn').addEventListener('click', function(e) {
   var loginLayer = createSingletonLoginLayer();
   loginLayer.style.display = 'block';

   var maskLayer = createSingletonMaskLayer();
   maskLayer.style.display = 'block';
  });

  // Person实现了Stu函数的部分功能,Stu就没必要重新再写,直接用Person已写的就好
  function Person(name,age,sex) {
   this.name = name;
   this.age = age;
   this.sex = sex;
  }
  function Stu(grade,sex,name,age) {
   // 只是借Person的方法来用,却不能继承Person的原型
   Person.call(this, name, age,sex);
   this.grade = grade;
  }
  // 所以这种借用继承必须要new才会有意义,不然this指向谁?!
  var stu = new Stu(2020,'male', "J", 18);

  A.prototype.name = 'AAA';
  function A() {
   
  }
  function B() {

  }
  // B的原型继承了A的原型
  B.prototype = A.prototype;
  // 两个实例都共享了A的原型
  var a = new A();
  console.log(a.name);	// AAA
  var b = new B();
  console.log(b.name);	// AAA


  //  也可以封装成一个函数以便使用
  // function extend(Target, Origin) {
  // Target.prototype = Origin.prototype;
  // }

  // extend(B, A);
  // var c = new B();
  // // !!注意上面两行代码的顺序一定不能写反
  // // 首先是先修改原型指向,然后才是new,不然先new使用的是自己的原型(未等到原型指向更变)
  // console.log(c.name);	// AAA

  function extend(Target, Origin) {
   Target.prototype = Origin.prototype;
  }

  A.prototype.name = 'AAA';
  function A() {
   
  }
  function B() {

  }
  // B的原型继承了A的原型
  extend(B, A);
  // 如果想给B单独设置一个原型属性
  B.prototype.unique = 'shared';
  var b = new B();
  // 成功设置
  console.log(b.unique);	//shared
  // 问题是A上面也相应的对了这条属性
  A.prototype.unique === 'shared'; //true

   // 场景: 实现B继承A的同时,B又能给自己单独设置原型属性而不影响A的原型
   A.prototype.name = 'AAA';
   function A() {
    
   }
   function B() {

   }

   // 1. B继承A,原型指向原型(AB共享A的原型)
   // B.prototype = A.prototype;

   // 2. B继承A的同时,把B的原型对象指向new A(),而非具体某个实例
   // 由于每new一次产生一个新的对象,所以A的任何一个实例对象对于B原型的变化是感觉不到的
   B.prototype = new A();
   // unique只能在B原型上找到,因为我们永远无法访问上面的那个new A()所在
   B.prototype.unique = 'unique';
   console.log(new B().unique);	// unique
   // 使用new调用,相当于一个新的实例对象,而该实例并非B原型的指向所在
   console.log(new A().unique);	// undefined
   // 即便用实例来调用也是如此
   var a = new A();
   console.log(a.unique);	// undefined
   console.log(a);	// 空对象
    
   // 3. 如果这样来写就大不相同了
   var a = new A();
   // 把B的原型指向为一个具体的实例
   B.prototype = a;
   // 当给B原型添加属性时也就相当于给实例给自己添加属性a='xyz'一样
   B.prototype.xyz = 'xyz';
   var b = new B();
   console.log(a.xyz);	// xyz
   console.log(a);	// {xyz: "xyz"}
   console.log(A.prototype.xyz);	// undefined	并未映射到A原型
   
   // 总结:
   // 1. 两个对象共享一个原型,通过这种继承变其一即都变
   // 2. 把原型指向new Fn(),通过这种继承在对被继承对象修改原型时,只体现在被继承对象原型上
   // 3. 把原型指向某个具体实例上时,通过这种继承在对被继承对象修改原型时,实例本身也会体现,但是不会影响实例的原型

 // 利用中间层封装一个继承函数
 function inherit(Target, Origin) {
  function F() {}	//中间层函数F
 // F.prototype (new F().__proto__) = A.prototype    AF共享原型A
  F.prototype = Origin.prototype;    
   // B.prototype = new F() B原型对象赋给函数F的实例,达到中间层的作用
  Target.prototype = new F();         
 }

 A.prototype.name = 'AAA';
 function A() {
	
 }
 function B() {

 }
 inherit(B, A);
 // unique属性除了在B.prototype上面能找到,其他任何地方都不会存在
 B.prototype.unique = 'unique';
 var a = new A();
 var b = new B();

 console.log(a.unique);	// undefined
 console.log(b.unique);	// unique

// 将constructor属性重新指向自己
Target.prototype.constructor = Target;

  // 由于super是个关键字,超类的名字这里用uber代替
  Target.prototype.uber = Origin.prototype;

 function inherit(Target, Origin) {
  function F() {}
  // 以下两行代码顺序一定不要搞反了,否则Origin会使用重写后的prototype对象,Target将无法继承Origin
  F.prototype = Origin.prototype;
  Target.prototype = new F();
  Target.prototype.constructor = Target;
  Target.prototype.uber = Origin.prototype;
 }

 A.prototype.name = 'AAA';
 function A() {
	
 }
 function B() {

 }
 inherit(B, A);
 B.prototype.unique = 'unique';
 var a = new A();
 var b = new B();

 console.log(a.unique);	// undefined  一个实例对象自然无法访问另一个实例对象的属性
 console.log(b.unique);	// unique
 console.log(b.constructor);	// function B
 console.log(b.uber);	// A.prototype

 var inherit = (function() {
  var F = function() {};
  return function(Target, Origin) {
   F.prototype = Origin.prototype;
   Target.prototype = new F();
   Target.prototype.constructor = Target;
   Target.prototype.uber = Origin.prototype;
  }
 }());

  function Person() {

  }
Person.prototype.lastName = 'He';
  var p1 = new Person();

  function Person() {
   // 1. 使用new操作符时,其实函数内部创建并非是一个空对象
   var this = {
    // 当访问一个对象的属性时,如果该对象没有该属性,会沿着__proto__这个属性的
    // 指向去查找,即Person.prototype 
    __proto__: Person.prototype 
   }
  }
  Person.prototype.lastName = 'He';
  var p1 = new Person();

  function Person() {
  
  }

  Person.prototype.lastName = 'He';

  // 创建一个新对象 
  var obj = {
   lastName: 'X'
  }

  var p1 = new Person();
  console.log(p1.lastName);	// He 

  // 原型指向给一个新的对象obj
  p1.__proto__ = obj;    // 相当于以下操作
  // p1 {
  // __proto__ : obj
  // }
  // 实例自己没有lastName属性的情况下,搜寻__proto__指向所在对象里的lastName
  console.log(p1.lastName);	// X

   function Person() {
  
  }

  Person.prototype.lastName = 'He';

  var p1 = new Person();
  console.log(p1.lastName);	// He
  // 修改原型上lastName属性为X
  Person.prototype.lastName = 'X';
  //    输出正常
  console.log(p1.lastName);	// X

  function Person() {
  
  }

  Person.prototype.lastName = 'He';

  var p1 = new Person();
  console.log(p1.lastName);	// He
  // 
  Person.prototype = {
   lastName: 'X'
  }
  console.log(p1.lastName);	// He

  // 1. Person本来的空间 --> 空间1
  Person.prototype = {
   lastName: 'He'
  };
  // 2. new操作符实例对象后指向空间1
  p1.__proto__ = Person.prototype;
  // 3. 重写Person.prototype --> 空间2
  Person.prototype = {
   lastName: 'X'
  }
  // 4. 就像引用类型赋值一样,我p1.__proto__的指向并未改变,还是最开始的空间1
  p1.__proto__ = {
   lastName: 'He'
  }

  function Person() {
  
  }
  // 1. 原空间上添加一个属性
  Person.prototype.lastName = 'He';
  // 2. 重写(覆盖)原型,变为一个新的空间
  Person.prototype = {
   lastName: 'X'
  }
  // 3. 实例化语句置在了重写后的原型下面,函数内部new时,p1.__proto__ --> Person.prototype
  var p1 = new Person();
  // 4. 而Person.prototype此时已经变为 --> lastName:X
  console.log(p1.lastName);	// X

  function Grand() {

  }
  Grand.prototype.sex = 'male';
  var grand = new Grand();

  function Dad() {
   this.prop = 'cool';
  }
  // 将构造函数Dad的原型设置为grand
  Dad.prototype = grand;
  var dad = new Dad();

  function Son() {
   this.age = 10;
  }
  // 将构造函数Son的原型设置为dad
  Son.prototype = dad;
  var son = new Son();

  console.log(son.age);	// 10

  console.log(son.sex);	//male

Grand.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

son.toString(); // "[object Object]"

  function Dad() {
   this.prop = 'cool';
   this.card = {
    c1 : 'Visa',
    c2: 'Master'
   }
  }
  var dad = new Dad();

  function Son() {
   this.age = 10;
  }
  Son.prototype = dad;
  var son = new Son();
  // 不是修改原型链上的prop,而是自身增加一个prop属性并为其赋值
  son.prop = 'good';
  console.log(son.prop);    // good    {age: 10, prop: "good"}

  // 可以修改原型链上引用类型里的属性
  son.card.c1 = 'JCB';
  console.log(son.card.c1);	// JCB
  delete son.card.c1;	// true
  console.log(son.card);	//	{c2: "Master"}

  // 但不能对其地址进行变更(其实这一步删除的是自身的card属性,而自身并没有该属性)
  delete son.card;
  console.log(son.card);	// {c2: "Master"}

  // 实例对象自身增加card属性,而非修改原型链上的
  son.card = [1,2,3];
  console.log(son.card);	//  [1, 2, 3]  {age: 10, prop: "good", card: Array(3)}

  // 在传入null创建对象时
  var obj = Object.create(null);
  // 空对象,并且没有__proto__属性!
  console.log(obj);	// {}

  // 创建一个对象
  var obj1 = {
   name:'a'
  }
  // 手动给obj加一个指针指向obj1
  obj.__proto__ = obj1;
  // 在控制台输出,指针确实是有了(为自定义的深色字体.而系统的是浅色)
  console.log(obj); 
  //	但是无法访问
  console.log(obj.name);	// undefined

  // 使用数字调用(必须加括号或者赋给一个变量然后再调用,否则会把'.'运算符当成浮点小数的'·')
  (123).toString();	// '123'
  
  var obj = {};
  obj.toString();	// "[object Object]"

  // 基本类型值123 --> 转换为包装类new Number(123) --> 包装类有该方法new Number(123).toString()
  // 重写的过程大概长这样
  var num = 123;
  Number.prototype.toString = function() {
   return this + '';
  }
  num.toString();	// '123'

  var num = 123;
  // 借助call来完成
  Object.prototype.toString.call(num);	// "[object Number]"

  var obj = {};
  document.write(obj);	// [object Object]

  // 为了佐证会每次调用toString,创建一个空对象(没有原型指针)
  // var obj1 = Object.create(null); 
  // // 下行代码相当于执行的是document.write(obj1.toString())
  // document.write(obj1);	// 报错,因为obj1没有toString方法
  // 甚至更明显些,手动给obj加个toString方法
  obj.toString = function() {
   return 'hehe';
  }
  document.write(obj);	// hehe

        var a = '{}';
        var b = '{}';
        console.log(a==b); // true

        var c = 0;
        var d = false;
        console.log(c == d); // true

        var obj1 = {a:1};
        var obj2 = {a:1};
        console.log(obj1==obj2); // false

        var a = 1;
        var b = a; // 复制a到b
        b++;
        console.log(a); // 1
        console.log(b); // 2

        var obj1 = {
            name:'a'
        }
        var obj2 = obj1;
        obj2.age = 18;
        console.log(obj2.age); // 18
        console.log(obj1.age); // 18
        console.log(obj2.name); // 'a'

        var str = 'string';
        str.toUpperCase();
        console.log(str) // "string"

        var num = 1;
        num = 2;
        console.log(num); // 2

        var person = 'person';
        person.name = 'Xiaoming';
        console.log(person.name); // undefined

       // 后台在读取到行字符串时
        var person = 'person';
       // 1. 创建字符串String包装对象,使其像其他引用类型一样拥有属性和方法
        var person = new String('person');
       // 2. 给这个包装类添加属性 new String('person').name
        person.name = 'Xiaoming';
       // 3. 接着立马销毁这个属性
        person.name = undefined;
       // 4. 此时,又会创建一个 new String(),但该对象里并没有name这个属性,返回undefined
        console.log(person.name); // undefined

  var str = 'abc';
  console.log(str.length);	// 3
  var num = 123;
  console.log(num.length);	// undefined

        var str = new String('string');
        str.toUpperCase();
        str = null;

        var person = {};
        console.log(person); //{}
        person.name = 'A';
        person.age = 18;
        delete person.name;
        person.age = 19;
        console.log(person); // {age:19}

        var obj1 = {
            name:'a'
        }
        var obj2 = obj1; 
        obj2.age = 18;
        console.log(obj2.age); // 18
        console.log(obj1.age); // 18

        var p1 = {
            name1:'A',
            age:20,
            sex:'male',
            family:['dad','son']
        }

        function copyObj(obj) {
         // 跟构造函数返回对象差不多,有木有? 
            var newObj = {};
            for(var prop in obj) {
                newObj[prop] = obj[prop];
            }
            return newObj;
        }
        var p2 = copyObj(p1);

p2.family[0] = 'mom'; //"mom"
p1.family[0] //"mom"
p1.age = 18; // 18
p2.age; // 20

var newObj = JSON.parse(JSON.stringify(p1))
p1.family[0] = 1; // 1
newObj.family[0]; // 'dad'

   var obj = {
    a: 1,
    b: 2,
    c: {
     card1: 'visa',
     card2: ['XX', 'XXX', 'XXXX']
    },
    d: ['r', 'g', 'b']
   }

   function deepClone(origin, target) {
    var target = target || {},
     toStr = Object.prototype.toString,
     arrStr = '[object Array]';
    for(var prop in origin) {
     if(origin.hasOwnProperty(prop)) {
      if(origin[prop] !== 'null' && typeof origin[prop] == 'object') {
       target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};
       deepClone(origin[prop], target[prop]);
      } else {
       target[prop] = origin[prop];
      }
     }
    } 
    return target;
   }

   var newObj = deepClone(obj);
   console.log(newObj);

		var a = 1;
		function test() {	// test访问的正是外层作用域(全局上)的a
			return a;	// a并非test创建的局部变量
		}

		function test() {
			var arr = [];
			for(var i = 0; i < 5; i++) {
				arr[i] = function() {
					console.log(i);		
				}
			}
			return arr;
		}
		var newArr = test();
		for(var j = 0; j < newArr.length; j++) {
			newArr[j]();	// 5 5 5 5 5
		}

过程分解:
		1. 调用test之前,全局上下文为: 
			test 定义时 test.[[scopes]]:
                        0: GO
			// GO(GlobalObject全局对象,又或者说全局上下文)
			GO: {
				test: function(){},
				newArr: undefined 
			}
		2. 调用test
			// AO(ActivationObject活动对象又或者叫VO变量对象VariableObject)
			test 执行时 test.[[scopes]]:
                        0: test的AO
			1: GO 
			test的AO: {
				arr: [...],
				i: 5
			}
		3. test内部,执行for语句,arr[i]函数的上下文为: 
			arr[i] 定义时 arr[i].[[scopes]]:
                        0: test的AO
			1: GO 
		4. test执行完毕,结果返回给newArr,此时全局对象AO更新为: 
			GO: {
					test: function(){},
					newArr: [...] 
				}
		5. 由于返回的数组每项是个函数的引用,调用时,即内部函数的AO更新为: 
			arr[i] 定义时 arr[i].[[scopes]]:
                        0: arr[i]的AO
			1: test的AO
			2: GO
			arr[i]的AO: {
				// 并没有变量i
			}								
		 6. 最后一步,调用newArr[j]()访问数组里的每一项,可以看到arr[i]的AO里没有自己的局部变 
                     量i

		function test() {
			var arr = [];
			for(var i = 0; i < 5; i++) {
				(function(i) {
					arr[i] = function() {
						console.log(i);		
					}
				}(i))
			}
			return arr;
		}
		var newArr = test();
		for(var j = 0; j < newArr.length; j++) {
			newArr[j]();	// 0 1 2 3 4
		}

		立即执行函数的AO: {
			arguments: {
				0: 0,
				length: 1
			},
			i : 0
		}

   var num = 0;    // 依赖于这个变量才实现的累加
   function test() {
    console.log(num++);
   }
   test();	// 0
   test();	// 1
   test();	// 2

   function foo() {
    var num = 0;
    function bar() {
     console.log(num++);
    }
    return bar;
   }
   var a = foo();
   a();	// 0
   a();	// 1
   a();	// 2

   function eater() {
    var food = 'apple';
    var obj = {
     eat: function() {
      if(food != '') {
       console.log(food);
       food = '';
      }else {
       console.log('xxx');
       
      }
     },
     push: function(myFood) {
      food = myFood;
     }
    } 
    return obj;
   }
   var a = eater();
   a.eat();	//apple
   a.eat();	//xxx
   a.push('樱桃');
   a.eat();	// 樱桃