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

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

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

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

  1.     function Person(){
  2.         this.name = 'michaelqin';
  3.     }
  4.     Person.prototype.sayName = function(){
  5.         alert(this.name);
  6.     }
  7.  
  8.     var person = new Person();
  9.     person.sayName();

2) 对象创建方法定义类

  1.     var Person = {
  2.         name: 'michaelqin',
  3.         sayName: function(){ alert(this.name); }
  4.     };
  6.     var person = Object.create(Person);
  7.     person.sayName();
  • 2. js类继承的方法有哪些

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

代码演示
1) 原型链法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function(){
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {}
  9.     Person.prototype = Animal.prototype; // 人继承自动物
  10.     Person.prototype.constructor = 'Person'; // 更新构造函数为人

2) 属性复制法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function() {
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {}
  9.  
  10.     for(prop in Animal.prototype) {
  11.         Person.prototype[prop] = Animal.prototype[prop];
  12.     } // 复制动物的所有属性到人量边
  13.     Person.prototype.constructor = 'Person'; // 更新构造函数为人

3) 构造器应用法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function() {
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {
  9.         Animal.call(this); // apply, call, bind方法都可以．细微区别，后面会提到．
  10.     }
  • 3. js类多重继承的实现方法是怎么样的?

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

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

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

代码演示

  1.     var globalVar = 'global var';
  2.  
  3.     function test() {
  4.         alert(globalVar); // undefined, 因为globalVar在本函数内被重定义了，导致全局失效，这里使用函数内的变量值，可是此时还没定义
  5.         var globalVar = 'overrided var'; //　globalVar在本函数内被重定义
  6.         alert(globalVar);　// overrided var
  7.     }
  8.     alert(globalVar); // global var，使用全局变量
  • 5. js里边的this指的是什么?

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

代码演示

  1.     function Person() {
  2.     }
  3.     Person.prototype.sayName() { alert(this.name); }
  4.  
  5.     var person1 = new Person();
  6.     person1.name = 'michaelqin';
  7.     person1.sayName(); // michaelqin
  • 6. apply, call和bind有什么区别?

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

代码演示

  1.     function Person() {
  2.     }
  3.     Person.prototype.sayName() { alert(this.name); }
  4.  
  5.     var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
  6.     1) apply
  7.     Person.prototype.sayName.apply(obj, [param1, param2, param3]);
  8.  
  9.     2) call
  10.     Person.prototype.sayName.call(obj, param1, param2, param3);
  11.  
  12.     3) bind
  13.     var sn = Person.prototype.sayName.bind(obj);
  14.     sn([param1, param2, param3]); // bind需要先绑定，再执行
  15.     sn(param1, param2, param3); // bind需要先绑定，再执行
  • 7. caller, callee和arguments分别是什么?

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

代码演示

  1.     function parent(param1, param2, param3) {
  2.         child(param1, param2, param3);
  3.     }
  4.  
  5.     function child() {
  6.         console.log(arguments); // { '0': 'mqin1', '1': 'mqin2', '2': 'mqin3' }
  7.         console.log(arguments.callee); // [Function: child]
  8.         console.log(child.caller); // [Function: parent]
  9.     }
  10.  
  11.     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.     1) 单例：　任意对象都是单例，无须特别处理
  2.     var obj = {name: 'michaelqin', age: 30};
  3.  
  4.     2) 工厂: 就是同样形式参数返回不同的实例
  5.     function Person() { this.name = 'Person1'; }
  6.     function Animal() { this.name = 'Animal1'; }
  7.  
  8.     function Factory() {}
  9.     Factory.prototype.getInstance = function(className) {
  10.         return eval('new ' + className + '()');
  11.     }
  12.  
  13.     var factory = new Factory();
  14.     var obj1 = factory.getInstance('Person');
  15.     var obj2 = factory.getInstance('Animal');
  16.     console.log(obj1.name); // Person1
  17.     console.log(obj2.name); // Animal1
  18.  
  19.     3) 代理: 就是新建个类调用老类的接口,包一下
  20.     function Person() { }
  21.     Person.prototype.sayName = function() { console.log('michaelqin'); }
  22.     Person.prototype.sayAge = function() { console.log(30); }
  23.  
  24.     function PersonProxy() {
  25.         this.person = new Person();
  26.         var that = this;
  27.         this.callMethod = function(functionName) {
  28.             console.log('before proxy:', functionName);
  29.             that.person[functionName](); // 代理
  30.             console.log('after proxy:', functionName);
  31.         }
  32.     }
  33.  
  34.     var pp = new PersonProxy();
  35.     pp.callMethod('sayName'); // 代理调用Person的方法sayName()
  36.     pp.callMethod('sayAge'); // 代理调用Person的方法sayAge() 
  37.  
  38.     4) 观察者: 就是事件模式，比如按钮的onclick这样的应用.
  39.     function Publisher() {
  40.         this.listeners = [];
  41.     }
  42.     Publisher.prototype = {
  43.         'addListener': function(listener) {
  44.             this.listeners.push(listener);
  45.         },
  46.  
  47.         'removeListener': function(listener) {
  48.             delete this.listeners[listener];
  49.         },
  50.  
  51.         'notify': function(obj) {
  52.             for(var i = 0; i < this.listeners.length; i++) {
  53.                 var listener = this.listeners[i];
  54.                 if (typeof listener !== 'undefined') {
  55.                     listener.process(obj);
  56.                 }
  57.             }
  58.         }
  59.     }; // 发布者
  60.  
  61.     function Subscriber() {
  62.  
  63.     }
  64.     Subscriber.prototype = {
  65.         'process': function(obj) {
  66.             console.log(obj);
  67.         }
  68.     };　// 订阅者
  69.  
  70.     var publisher = new Publisher();
  71.     publisher.addListener(new Subscriber());
  72.     publisher.addListener(new Subscriber());
  73.     publisher.notify({name: 'michaelqin', ageo: 30}); // 发布一个对象到所有订阅者
  74.     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) 构造函数方法定义类

  1.     function Person(){
  2.         this.name = 'michaelqin';
  3.     }
  4.     Person.prototype.sayName = function(){
  5.         alert(this.name);
  6.     }
  7.  
  8.     var person = new Person();
  9.     person.sayName();

2) 对象创建方法定义类

  1.     var Person = {
  2.         name: 'michaelqin',
  3.         sayName: function(){ alert(this.name); }
  4.     };
  6.     var person = Object.create(Person);
  7.     person.sayName();
  • 2. js类继承的方法有哪些

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

代码演示
1) 原型链法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function(){
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {}
  9.     Person.prototype = Animal.prototype; // 人继承自动物
  10.     Person.prototype.constructor = 'Person'; // 更新构造函数为人

2) 属性复制法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function() {
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {}
  9.  
  10.     for(prop in Animal.prototype) {
  11.         Person.prototype[prop] = Animal.prototype[prop];
  12.     } // 复制动物的所有属性到人量边
  13.     Person.prototype.constructor = 'Person'; // 更新构造函数为人

3) 构造器应用法

  1.     function Animal() {
  2.         this.name = 'animal';
  3.     }
  4.     Animal.prototype.sayName = function() {
  5.         alert(this.name);
  6.     };
  7.  
  8.     function Person() {
  9.         Animal.call(this); // apply, call, bind方法都可以．细微区别，后面会提到．
  10.     }
  • 3. js类多重继承的实现方法是怎么样的?

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

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

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

代码演示

  1.     var globalVar = 'global var';
  2.  
  3.     function test() {
  4.         alert(globalVar); // undefined, 因为globalVar在本函数内被重定义了，导致全局失效，这里使用函数内的变量值，可是此时还没定义
  5.         var globalVar = 'overrided var'; //　globalVar在本函数内被重定义
  6.         alert(globalVar);　// overrided var
  7.     }
  8.     alert(globalVar); // global var，使用全局变量
  • 5. js里边的this指的是什么?

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

代码演示

  1.     function Person() {
  2.     }
  3.     Person.prototype.sayName() { alert(this.name); }
  4.  
  5.     var person1 = new Person();
  6.     person1.name = 'michaelqin';
  7.     person1.sayName(); // michaelqin
  • 6. apply, call和bind有什么区别?

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

代码演示

  1.     function Person() {
  2.     }
  3.     Person.prototype.sayName() { alert(this.name); }
  4.  
  5.     var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
  6.     1) apply
  7.     Person.prototype.sayName.apply(obj, [param1, param2, param3]);
  8.  
  9.     2) call
  10.     Person.prototype.sayName.call(obj, param1, param2, param3);
  11.  
  12.     3) bind
  13.     var sn = Person.prototype.sayName.bind(obj);
  14.     sn([param1, param2, param3]); // bind需要先绑定，再执行
  15.     sn(param1, param2, param3); // bind需要先绑定，再执行
  • 7. caller, callee和arguments分别是什么?

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

代码演示

  1.     function parent(param1, param2, param3) {
  2.         child(param1, param2, param3);
  3.     }
  4.  
  5.     function child() {
  6.         console.log(arguments); // { '0': 'mqin1', '1': 'mqin2', '2': 'mqin3' }
  7.         console.log(arguments.callee); // [Function: child]
  8.         console.log(child.caller); // [Function: parent]
  9.     }
  10.  
  11.     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.     1) 单例：　任意对象都是单例，无须特别处理
  2.     var obj = {name: 'michaelqin', age: 30};
  3.  
  4.     2) 工厂: 就是同样形式参数返回不同的实例
  5.     function Person() { this.name = 'Person1'; }
  6.     function Animal() { this.name = 'Animal1'; }
  7.  
  8.     function Factory() {}
  9.     Factory.prototype.getInstance = function(className) {
  10.         return eval('new ' + className + '()');
  11.     }
  12.  
  13.     var factory = new Factory();
  14.     var obj1 = factory.getInstance('Person');
  15.     var obj2 = factory.getInstance('Animal');
  16.     console.log(obj1.name); // Person1
  17.     console.log(obj2.name); // Animal1
  18.  
  19.     3) 代理: 就是新建个类调用老类的接口,包一下
  20.     function Person() { }
  21.     Person.prototype.sayName = function() { console.log('michaelqin'); }
  22.     Person.prototype.sayAge = function() { console.log(30); }
  23.  
  24.     function PersonProxy() {
  25.         this.person = new Person();
  26.         var that = this;
  27.         this.callMethod = function(functionName) {
  28.             console.log('before proxy:', functionName);
  29.             that.person[functionName](); // 代理
  30.             console.log('after proxy:', functionName);
  31.         }
  32.     }
  33.  
  34.     var pp = new PersonProxy();
  35.     pp.callMethod('sayName'); // 代理调用Person的方法sayName()
  36.     pp.callMethod('sayAge'); // 代理调用Person的方法sayAge() 
  37.  
  38.     4) 观察者: 就是事件模式，比如按钮的onclick这样的应用.
  39.     function Publisher() {
  40.         this.listeners = [];
  41.     }
  42.     Publisher.prototype = {
  43.         'addListener': function(listener) {
  44.             this.listeners.push(listener);
  45.         },
  46.  
  47.         'removeListener': function(listener) {
  48.             delete this.listeners[listener];
  49.         },
  50.  
  51.         'notify': function(obj) {
  52.             for(var i = 0; i < this.listeners.length; i++) {
  53.                 var listener = this.listeners[i];
  54.                 if (typeof listener !== 'undefined') {
  55.                     listener.process(obj);
  56.                 }
  57.             }
  58.         }
  59.     }; // 发布者
  60.  
  61.     function Subscriber() {
  62.  
  63.     }
  64.     Subscriber.prototype = {
  65.         'process': function(obj) {
  66.             console.log(obj);
  67.         }
  68.     };　// 订阅者
  69.  
  70.     var publisher = new Publisher();
  71.     publisher.addListener(new Subscriber());
  72.     publisher.addListener(new Subscriber());
  73.     publisher.notify({name: 'michaelqin', ageo: 30}); // 发布一个对象到所有订阅者
  74.     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. javascript面向对象之闭包

    javascript面向对象之闭包 学习javascript一段时间了,自己对闭包作出如下总结,如有某点不妥,请君指出,不胜感激! 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量 ...

  2. JavaScript面向对象，闭包内存图，闭包和作用域

    var i = 10; function test(){ var j; i=20; //未定义 function test(){ j='hello'; } console.log(test()); / ...

  3. 关于javascript面向对象之闭包

    要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量,而在函数外部无法 ...

  4. JavaScript面向对象之闭包的理解

    首先了解一下什么是闭包,闭包是一个函数,通常被称为闭包函数或者绑定函数,该函数运行在一个特殊的环境里,该环境定义了一些本地变量,当该函数被调用时,仍可以使用这些本地变量. 当一个函数在不位于它所处的环 ...

  5. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  6. JavaScript函数、闭包、原型、面向对象

    JavaScript函数.闭包.原型.面向对象 断言 单元测试框架的核心是断言方法,通常叫assert(). 该方法通常接收一个值--需要断言的值,以及一个表示该断言目的的描述. 如果该值执行的结果为 ...

  7. 闭包初体验 -《JavaScript面向对象编程指南》

    下面是我对闭包的理解:(把他们整理出来,整理的过程也是在梳理) 参考<JavaScript面向对象编程指南> 1.首先,在理解闭包之前: 我们首先应该清楚下作用域和作用域链 作用域:每个函 ...

  8. 深入理解javascript原型和闭包（12）——简介【作用域】

    提到作用域,有一句话大家(有js开发经验者)可能比较熟悉:“javascript没有块级作用域”.所谓“块”,就是大括号“{}”中间的语句.例如if语句: 再比如for语句: 所以,我们在编写代码的时 ...

  9. 深入理解javascript原型和闭包（13）-【作用域】和【上下文环境】

    上文简单介绍了作用域,本文把作用域和上下文环境结合起来说一下,会理解的更深一些. 如上图,我们在上文中已经介绍了,除了全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了.而不 ...

随机推荐

  1. 将 vue 挂在 window 对象上，实现能调用 elementUI 的组件

    html 部分: <div id="sample"> </div> js 部分(将js代码放在 body 的 onload事件中: <body onl ...

  2. 编写第一个python selenium-webdriver程序（二）

    上节介绍了如何搭建selenium 系统环境,那么本节来讲一下如何开始编写第一个自动化测试脚本. Selenium2.x 将浏览器原生的API封装成WebDriver API,可以直接操作浏览器页面里 ...

  3. SQL Server 2005无法远程连接的解决方法 （转帖）

    方法如下:  一.为 SQL Server 2005 启用远程连接1. 单击"开始",依次选择"程序"."Microsoft SQL Server 2 ...

  4. js调用.net后台事件，和后台调用前台等方法总结(转帖)

    js调用.net后台事件,和后台调用前台等方法总结 原文来自:http://hi.baidu.com/xiaowei0705/blog/item/4d56163f5e4bf616bba16725.ht ...

  5. 读DataSnap源代码（二）

    program Project1; {$APPTYPE GUI} {$R *.dres} uses Vcl.Forms, Web.WebReq, IdHTTPWebBrokerBridge, Form ...

  6. Vim NerdTree

    参考链接:http://yang3wei.github.io/blog/2013/01/29/nerdtree-kuai-jie-jian-ji-lu/ 切换工作台和目录 ctrl + w + h 光 ...

  7. SDRAM初识

    SDRAM初识 1. 2. 3. 4. SDRAM分为bank地址和行列地址,看bank地址的位宽就可以推断出bank的数量,行列地址信号是集成在了一个信号中,是并行的. 5. 6. SDRAM与主机 ...

  8. ALGO-117_蓝桥杯_算法训练_友好数

    问题描述 有两个整数,如果每个整数的约数和(除了它本身以外)等于对方,我们就称这对数是友好的.例如: 9的约数和有:+= 4的约数和有:+= 所以9和4不是友好的. 220的约数和有: = 284的约 ...

  9. 【Nginx】之安装使用和配置SSL支持

    本文采用的是nginx源码安装 1.下载nginx源码包 wget http://nginx.org/download/nginx-1.8.0.tar 或者登录nginx官网下载更高版本 2.ngin ...

  10. 【Json】Jackson将json转换成泛型List

    Jackson将json转换成泛型List 获取泛型类型 /** * 获取泛型类型 * * @return */ protected Class<T> getGenericsType() ...