Javascript高级话题

面向对象、作用域、闭包、设计模式等。

1. 常见的JS类定义方式

  • 构造函数原型
  • 对象创建

原型法是通用老方法,对象创建是ES5推荐使用的方法.目前来看,原型法更普遍。

  1. 构造函数方法定义类:
function Person() {
    this.name = 'HalZhan';
}
Person.prototype.sayName = function() {
    alert(this.name);
}
var person = new Person();
person.sayName();
  1. 对象创建方法定义类:
var Person = {
    name: 'HalZhan',
    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; // 更新构造函数为人
  1. 属性复制法:
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; // 更新构造函数为人
  1. 构造器应用法:
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 = function () {
    alert(this.name);
}

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

6. apply, call和bind的区别

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

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

var obj = { name: 'HalZhan' }; // 注意这是一个普通对象,它不是Person的实例
var param1, param2, param3;
// 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': 'halzhan1', '1': 'halzhan2', '2': 'halzhan3' }
    console.log(arguments.callee); // [Function: child]
    console.log(child.caller); // [Function: parent]
}

parent('halzhan1', 'halzhan2', 'halzhan3');

8. 什么是闭包,闭包有哪些用处

闭包简而言之,两个字:函数,更多字:嵌套函数的父子自我引用关系。所有函数都是闭包。通俗的说,闭包就是作用域范围,因为js是函数作用域,所以函数就是闭包。全局函数的作用域范围就是全局,所以无须讨论。更多的应用其实是在内嵌函数,这就会涉及到内嵌作用域,或者叫作用域链。说到内嵌,其实就是父子引用关系(父函数包含子函数,子函数因为函数作用域又引用父函数,所以叫闭包),这就会带来另外一个问题,什么时候引用结束?如果不结束,就会一直占用内存,引起内存泄漏。好吧,不用的时候就引用设为空,死结就解开了。

9. defineProperty, hasOwnProperty, isEnumerable的用途

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

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

 // 1) 单例: 任意对象都是单例,无须特别处理
var obj = { name: 'halzhan', age: 24 };

// 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('halzhan'); }
Person.prototype.sayAge = function () { console.log(24); }

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: 'halzhan', ageo: 24 }); // 发布一个对象到所有订阅者
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

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

推荐阅读更多精彩内容

  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 821评论 0 1
  • 前言 人生苦多,快来 Kotlin ,快速学习Kotlin! 什么是Kotlin? Kotlin 是种静态类型编程...
    任半生嚣狂阅读 26,062评论 9 118
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,952评论 12 65
  • 继承 一、混入式继承 二、原型继承 利用原型中的成员可以被和其相关的对象共享这一特性,可以实现继承,这种实现继承的...
    magic_pill阅读 1,019评论 0 3
  • 无论哪种选择都是你值得去尝试的,无论哪种结果都不会是毫无意义的____wq
    王_庆ing阅读 138评论 0 1