javascript(面向对象，做用域，闭包，设计模式等)

javascript(面向对象，做用域，闭包，设计模式等)

• 1. 经常使用js类定义的方法有哪些？

参考答案：主要有构造函数原型和对象建立两种方法。原型法是通用老方法，对象建立是ES5推荐使用的方法.目前来看，原型法更广泛.

代码演示
1) 构造函数方法定义类

    function Person(){
        this.name = 'michaelqin';
    }
    Person.prototype.sayName = function(){
        alert(this.name);
    }

    var person = new Person();
    person.sayName();

2) 对象建立方法定义类

var Person = {
        name: 'michaelqin',
        sayName: function(){ alert(this.name); }
    };

    var person = Object.create(Person);
    person.sayName();

• 2. js类继承的方法有哪些

参考答案：原型链法，属性复制法和构造器应用法. 另外，因为每一个对象能够是一个类，这些方法也能够用于对象类的继承．

代码演示
1) 原型链法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function(){
        alert(this.name);
    };

    function Person() {}
    Person.prototype = Animal.prototype; // 人继承自动物
    Person.prototype.constructor = 'Person'; // 更新构造函数为人

2) 属性复制法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function() {
        alert(this.name);
    };

    function Person() {}

    for(prop in Animal.prototype) {
        Person.prototype[prop] = Animal.prototype[prop];
    } // 复制动物的全部属性到人量边
    Person.prototype.constructor = 'Person'; // 更新构造函数为人

3) 构造器应用法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function() {
        alert(this.name);
    };

    function Person() {
        Animal.call(this); // apply, call, bind方法均可以．细微区别，后面会提到．
    }

• 3. js类多重继承的实现方法是怎么样的?

参考答案：就是类继承里边的属性复制法来实现．由于当全部父类的prototype属性被复制后，子类天然拥有相似行为和属性．

• 4. js里的做用域是什么样子的？

参考答案：大多数语言里边都是块做做用域，以{}进行限定，js里边不是．js里边叫函数做用域，就是一个变量在全函数里有效．好比有个变量p1在函数最后一行定义，第一行也有效，可是值是undefined.

代码演示

    var globalVar = 'global var';

    function test() {
        alert(globalVar); // undefined, 由于globalVar在本函数内被重定义了，致使全局失效，这里使用函数内的变量值，但是此时还没定义
        var globalVar = 'overrided var'; //　globalVar在本函数内被重定义
        alert(globalVar);　// overrided var
    }
    alert(globalVar); // global var，使用全局变量

• 5. js里边的this指的是什么?

参考答案: this指的是对象自己，而不是构造函数．

代码演示

    function Person() {
    }
    Person.prototype.sayName() { alert(this.name); }

    var person1 = new Person();
    person1.name = 'michaelqin';
    person1.sayName(); // michaelqin

• 6. apply, call和bind有什么区别?

参考答案：三者均可以把一个函数应用到其余对象上，注意不是自身对象．apply,call是直接执行函数调用，bind是绑定，执行须要再次调用．apply和call的区别是apply接受数组做为参数，而call是接受逗号分隔的无限多个参数列表，

代码演示

    function Person() {
    }
    Person.prototype.sayName() { alert(this.name); }

    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
    1) apply
    Person.prototype.sayName.apply(obj, [param1, param2, param3]);

    2) call
    Person.prototype.sayName.call(obj, param1, param2, param3);

    3) bind
    var sn = Person.prototype.sayName.bind(obj);    
    sn([param1, param2, param3]); // bind须要先绑定，再执行 
    sn(param1, param2, param3); // bind须要先绑定，再执行

• 7. caller, callee和arguments分别是什么?

参考答案: caller,callee之间的关系就像是employer和employee之间的关系，就是调用与被调用的关系，两者返回的都是函数对象引用．arguments是函数的全部参数列表，它是一个类数组的变量．

代码演示

    function parent(param1, param2, param3) {
        child(param1, param2, param3);
    }

    function child() {
        console.log(arguments); // { '0': 'mqin1', '1': 'mqin2', '2': 'mqin3' }
        console.log(arguments.callee); // [Function: child]
        console.log(child.caller); // [Function: parent]
    }

    parent('mqin1', 'mqin2', 'mqin3');

• 8. 什么是闭包，闭包有哪些用处?

参考答案: 闭包这个术语，不管中文翻译仍是英文解释都太２Ｂ了，我必须骂人，由于它什么其实都不是．非要讲它是什么的话，两个字函数，更多字嵌套函数的父子自我引用关系．全部函数都是闭包．通俗的说，闭包就是做用域范围，由于js是函数做用域，因此函数就是闭包．全局函数的做用域范围就是全局，因此无须讨论．更多的应用实际上是在内嵌函数，这就会涉及到内嵌做用域，或者叫做用域链．说到内嵌，其实就是父子引用关系(父函数包含子函数，子函数由于函数做用域又引用父函数，这它妈不是死结吗？因此叫闭包），这就会带来另一个问题，何时引用结束？若是不结束，就会一直占用内存，引发内存泄漏．好吧，不用的时候就引用设为空，死结就解开了．

• 9. defineProperty, hasOwnProperty, propertyIsEnumerable都是作什么用的？

参考答案：Object.defineProperty(obj, prop, descriptor)用来给对象定义属性,有value,writable,configurable,enumerable,set/get等.hasOwnProerty用于检查某一属性是否是存在于对象自己，继承来的父亲的属性不算．propertyIsEnumerable用来检测某一属性是否可遍历，也就是能不能用for..in循环来取到.

• 10. js经常使用设计模式的实现思路，单例，工厂，代理，装饰，观察者模式等

参考答案：

    1) 单例：　任意对象都是单例，无须特别处理
    var obj = {name: 'michaelqin', age: 30};

    2) 工厂: 就是一样形式参数返回不一样的实例
    function Person() { this.name = 'Person1'; }
    function Animal() { this.name = 'Animal1'; }

    function Factory() {}
    Factory.prototype.getInstance = function(className) {
        return eval('new ' + className + '()');
    }

    var factory = new Factory();
    var obj1 = factory.getInstance('Person');
    var obj2 = factory.getInstance('Animal');
    console.log(obj1.name); // Person1
    console.log(obj2.name); // Animal1

    3) 代理: 就是新建个类调用老类的接口,包一下
    function Person() { }
    Person.prototype.sayName = function() { console.log('michaelqin'); }
    Person.prototype.sayAge = function() { console.log(30); }

    function PersonProxy() { 
        this.person = new Person();
        var that = this;
        this.callMethod = function(functionName) {
            console.log('before proxy:', functionName);
            that.person[functionName](); // 代理
            console.log('after proxy:', functionName);
        }
    }

    var pp = new PersonProxy();
    pp.callMethod('sayName'); // 代理调用Person的方法sayName()
    pp.callMethod('sayAge'); // 代理调用Person的方法sayAge() 

    4) 观察者: 就是事件模式，好比按钮的onclick这样的应用.
    function Publisher() {
        this.listeners = [];
    }
    Publisher.prototype = {
        'addListener': function(listener) {
            this.listeners.push(listener);
        },

        'removeListener': function(listener) {
            delete this.listeners[listener];
        },

        'notify': function(obj) {
            for(var i = 0; i < this.listeners.length; i++) {
                var listener = this.listeners[i];
                if (typeof listener !== 'undefined') {
                    listener.process(obj);
                }
            }
        }
    }; // 发布者

    function Subscriber() {

    }
    Subscriber.prototype = {
        'process': function(obj) {
            console.log(obj);
        }
    };　// 订阅者


    var publisher = new Publisher();
    publisher.addListener(new Subscriber());
    publisher.addListener(new Subscriber());
    publisher.notify({name: 'michaelqin', ageo: 30}); // 发布一个对象到全部订阅者
    publisher.notify('2 subscribers will both perform process'); // 发布一个字符串到全部订阅者

• 11. 列举数组相关的经常使用方法

参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

• 12. 列举字符串相关的经常使用方法

参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

javascript高级话题(面向对象，做用域，闭包，设计模式等)

• 1. 经常使用js类定义的方法有哪些？

参考答案：主要有构造函数原型和对象建立两种方法。原型法是通用老方法，对象建立是ES5推荐使用的方法.目前来看，原型法更广泛.

代码演示
1) 构造函数方法定义类

    function Person(){
        this.name = 'michaelqin';
    }
    Person.prototype.sayName = function(){
        alert(this.name);
    }

    var person = new Person();
    person.sayName();

2) 对象建立方法定义类

var Person = {
        name: 'michaelqin',
        sayName: function(){ alert(this.name); }
    };

    var person = Object.create(Person);
    person.sayName();

• 2. js类继承的方法有哪些

参考答案：原型链法，属性复制法和构造器应用法. 另外，因为每一个对象能够是一个类，这些方法也能够用于对象类的继承．

代码演示
1) 原型链法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function(){
        alert(this.name);
    };

    function Person() {}
    Person.prototype = Animal.prototype; // 人继承自动物
    Person.prototype.constructor = 'Person'; // 更新构造函数为人

2) 属性复制法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function() {
        alert(this.name);
    };

    function Person() {}

    for(prop in Animal.prototype) {
        Person.prototype[prop] = Animal.prototype[prop];
    } // 复制动物的全部属性到人量边
    Person.prototype.constructor = 'Person'; // 更新构造函数为人

3) 构造器应用法

    function Animal() {
        this.name = 'animal';
    }
    Animal.prototype.sayName = function() {
        alert(this.name);
    };

    function Person() {
        Animal.call(this); // apply, call, bind方法均可以．细微区别，后面会提到．
    }

• 3. js类多重继承的实现方法是怎么样的?

参考答案：就是类继承里边的属性复制法来实现．由于当全部父类的prototype属性被复制后，子类天然拥有相似行为和属性．

• 4. js里的做用域是什么样子的？

参考答案：大多数语言里边都是块做做用域，以{}进行限定，js里边不是．js里边叫函数做用域，就是一个变量在全函数里有效．好比有个变量p1在函数最后一行定义，第一行也有效，可是值是undefined.

代码演示

    var globalVar = 'global var';

    function test() {
        alert(globalVar); // undefined, 由于globalVar在本函数内被重定义了，致使全局失效，这里使用函数内的变量值，但是此时还没定义
        var globalVar = 'overrided var'; //　globalVar在本函数内被重定义
        alert(globalVar);　// overrided var
    }
    alert(globalVar); // global var，使用全局变量

• 5. js里边的this指的是什么?

参考答案: this指的是对象自己，而不是构造函数．

代码演示

    function Person() {
    }
    Person.prototype.sayName() { alert(this.name); }

    var person1 = new Person();
    person1.name = 'michaelqin';
    person1.sayName(); // michaelqin

• 6. apply, call和bind有什么区别?

参考答案：三者均可以把一个函数应用到其余对象上，注意不是自身对象．apply,call是直接执行函数调用，bind是绑定，执行须要再次调用．apply和call的区别是apply接受数组做为参数，而call是接受逗号分隔的无限多个参数列表，

代码演示

    function Person() {
    }
    Person.prototype.sayName() { alert(this.name); }

    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
    1) apply
    Person.prototype.sayName.apply(obj, [param1, param2, param3]);

    2) call
    Person.prototype.sayName.call(obj, param1, param2, param3);

    3) bind
    var sn = Person.prototype.sayName.bind(obj);    
    sn([param1, param2, param3]); // bind须要先绑定，再执行 
    sn(param1, param2, param3); // bind须要先绑定，再执行

• 7. caller, callee和arguments分别是什么?

参考答案: caller,callee之间的关系就像是employer和employee之间的关系，就是调用与被调用的关系，两者返回的都是函数对象引用．arguments是函数的全部参数列表，它是一个类数组的变量．

代码演示

    function parent(param1, param2, param3) {
        child(param1, param2, param3);
    }

    function child() {
        console.log(arguments); // { '0': 'mqin1', '1': 'mqin2', '2': 'mqin3' }
        console.log(arguments.callee); // [Function: child]
        console.log(child.caller); // [Function: parent]
    }

    parent('mqin1', 'mqin2', 'mqin3');

• 8. 什么是闭包，闭包有哪些用处?

参考答案: 闭包这个术语，不管中文翻译仍是英文解释都太２Ｂ了，我必须骂人，由于它什么其实都不是．非要讲它是什么的话，两个字函数，更多字嵌套函数的父子自我引用关系．全部函数都是闭包．通俗的说，闭包就是做用域范围，由于js是函数做用域，因此函数就是闭包．全局函数的做用域范围就是全局，因此无须讨论．更多的应用实际上是在内嵌函数，这就会涉及到内嵌做用域，或者叫做用域链．说到内嵌，其实就是父子引用关系(父函数包含子函数，子函数由于函数做用域又引用父函数，这它妈不是死结吗？因此叫闭包），这就会带来另一个问题，何时引用结束？若是不结束，就会一直占用内存，引发内存泄漏．好吧，不用的时候就引用设为空，死结就解开了．

• 9. defineProperty, hasOwnProperty, propertyIsEnumerable都是作什么用的？

参考答案：Object.defineProperty(obj, prop, descriptor)用来给对象定义属性,有value,writable,configurable,enumerable,set/get等.hasOwnProerty用于检查某一属性是否是存在于对象自己，继承来的父亲的属性不算．propertyIsEnumerable用来检测某一属性是否可遍历，也就是能不能用for..in循环来取到.

• 10. js经常使用设计模式的实现思路，单例，工厂，代理，装饰，观察者模式等

参考答案：

    1) 单例：　任意对象都是单例，无须特别处理
    var obj = {name: 'michaelqin', age: 30};

    2) 工厂: 就是一样形式参数返回不一样的实例
    function Person() { this.name = 'Person1'; }
    function Animal() { this.name = 'Animal1'; }

    function Factory() {}
    Factory.prototype.getInstance = function(className) {
        return eval('new ' + className + '()');
    }

    var factory = new Factory();
    var obj1 = factory.getInstance('Person');
    var obj2 = factory.getInstance('Animal');
    console.log(obj1.name); // Person1
    console.log(obj2.name); // Animal1

    3) 代理: 就是新建个类调用老类的接口,包一下
    function Person() { }
    Person.prototype.sayName = function() { console.log('michaelqin'); }
    Person.prototype.sayAge = function() { console.log(30); }

    function PersonProxy() { 
        this.person = new Person();
        var that = this;
        this.callMethod = function(functionName) {
            console.log('before proxy:', functionName);
            that.person[functionName](); // 代理
            console.log('after proxy:', functionName);
        }
    }

    var pp = new PersonProxy();
    pp.callMethod('sayName'); // 代理调用Person的方法sayName()
    pp.callMethod('sayAge'); // 代理调用Person的方法sayAge() 

    4) 观察者: 就是事件模式，好比按钮的onclick这样的应用.
    function Publisher() {
        this.listeners = [];
    }
    Publisher.prototype = {
        'addListener': function(listener) {
            this.listeners.push(listener);
        },

        'removeListener': function(listener) {
            delete this.listeners[listener];
        },

        'notify': function(obj) {
            for(var i = 0; i < this.listeners.length; i++) {
                var listener = this.listeners[i];
                if (typeof listener !== 'undefined') {
                    listener.process(obj);
                }
            }
        }
    }; // 发布者

    function Subscriber() {

    }
    Subscriber.prototype = {
        'process': function(obj) {
            console.log(obj);
        }
    };　// 订阅者


    var publisher = new Publisher();
    publisher.addListener(new Subscriber());
    publisher.addListener(new Subscriber());
    publisher.notify({name: 'michaelqin', ageo: 30}); // 发布一个对象到全部订阅者
    publisher.notify('2 subscribers will both perform process'); // 发布一个字符串到全部订阅者

• 11. 列举数组相关的经常使用方法

参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

• 12. 列举字符串相关的经常使用方法

参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase