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();

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

代码演示

  1. 原型链法

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

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

  2. 属性自制法

    function Animal() {
    this.name = 'animal';
    }
    Animal.prototype.sayName = {
    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 = {
    alert(this.name);
    };

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

  1. js类多重继承的实现方法是怎么样的?
    参考答案:就是类继承里边的属性复制法来实现.因为当所有父类的prototype属性被复制后,子类自然拥有类似行为和属性.

  2. 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,使用全局变量
  1. js里边的this指的是什么?
    参考答案: this指的是对象本身,而不是构造函数.

代码演示

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

var person1 = new Person();
person1.name = 'michaelqin';
person1.sayName(); // michaelqin
  1. 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需要先绑定,再执行
  1. 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');
  1. 什么是闭包,闭包有哪些用处?
    参考答案: 闭包这个术语,无论中文翻译还是英文解释都太2B了,我必须骂人,因为它什么其实都不是.非要讲它是什么的话,两个字函数,更多字嵌套函数的父子自我引用关系.所有函数都是闭包.通俗的说,闭包就是作用域范围,因为js是函数作用域,所以函数就是闭包.全局函数的作用域范围就是全局,所以无须讨论.更多的应用其实是在内嵌函数,这就会涉及到内嵌作用域,或者叫作用域链.说到内嵌,其实就是父子引用关系(父函数包含子函数,子函数因为函数作用域又引用父函数,这它妈不是死结吗?所以叫闭包),这就会带来另外一个问题,什么时候引用结束?如果不结束,就会一直占用内存,引起内存泄漏.好吧,不用的时候就引用设为空,死结就解开了.

  2. defineProperty, hasOwnProperty, isEnumerable都是做什么用的?
    参考答案:Object.defineProperty(obj, prop, descriptor)用来给对象定义属性,有value,writable,configurable,enumerable,set/get等.hasOwnProerty用于检查某一属性是不是存在于对象本身,继承来的父亲的属性不算.isEnumerable用来检测某一属性是否可遍历,也就是能不能用for..in循环来取到.

  3. 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

    1. 代理: 就是新建个类调用老类的接口,包一下
      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.personfunctionName; // 代理
    console.log('after proxy:', functionName);
    }
    }

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

    1. 观察者: 就是事件模式,比如按钮的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'); // 发布一个字符串到所有订阅者
  1. 列举数组相关的常用方法
    参考答案: push/pop, shift/unshift, split/join, slice/splice/concat, sort/reverse, map/reduce, forEach, filter

  2. 列举字符串相关的常用方法
    参考答案: indexOf/lastIndexOf/charAt, split/match/test, slice/substring/substr, toLowerCase/toUpperCase

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,324评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,356评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,328评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,147评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,160评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,115评论 1 296
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,025评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,867评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,307评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,528评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,688评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,409评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,001评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,657评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,811评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,685评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,573评论 2 353

推荐阅读更多精彩内容