Blog Logo

JavaScript高级(二)

写于2015-10-22 01:26 阅读耗时10分钟 阅读量


5.继承

继承可以分成:构造函数的继承和非构造函数的继承。

5.1 构造函数的继承

构造函数的继承,可以用以下五种方法实现。

1)使用call/apply方法

function People(name,age){
    this.name=name;
    this.age=age;
}
function Student(name,age,grade){
    People.apply(this,arguments);
    //People.call(this,name,age);
    this.grade=grade;
}
var ww=new Student("ww","22","100分");
ww.name;//'ww'

总结:

a. 用call/apply方法能改变this的指向,上面的代码将People对象指向了Student对象。 b. apply使用方法是apply(this,[arg0,arg1,...]); c. call使用方法是call(this,arg0,arg1,...)。

2)使用prototype属性

function Animals(){
   this.category='animals';
}
function People(){
  this.name='ww';
  this.say=function(){
    console.log('My name is '+this.name);
  }
}
People.prototype.constructor == People;//true
People.prototype = new Animals();
People.prototype.constructor == People;//false
People.prototype.constructor == Animals.prototype.constructor;//true
People.prototype.constructor == Animals;//true
People.prototype.constructor = People;
People.prototype.constructor == People;//true
var p=new People();
p.category;//'animals'
p.constructor == People.prototype.constructor;//true

总结:

a.任何一个prototype对象都有一个constructor属性,指向它的构造函数。 b.每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。

3)直接继承prototype

function Animals(){ }
Animals.prototype.category='animals';

function People(){
  this.name='ww';
  this.say=function(){
    console.log('My name is '+this.name);
  }
}
People.prototype=Animals.prototype;
Animals.prototype.constructor == Animals;//true
People.prototype.constructor=People;
Animals.prototype.constructor == Animals;//false

var p=new People();
p.category;//'animals'

总结:

与方法一相比,这样做的优点:效率比较高(不用执行和建立Animal的实例了),比较省内存;缺点:People.prototype和Animal.prototype现在指向了同一个对象People。

4)利用空对象作为中介

function Animals(){ }
Animals.prototype.category='animals';

function People(){
  this.name='ww';
  this.say=function(){
    console.log('My name is '+this.name);
  }
}
function Empty(){}
Empty.prototype=Animals.prototype;
People.prototype=new Empty();
Animals.prototype.constructor == Animals;//true
People.prototype.constructor=People;
Animals.prototype.constructor == Animals;//true

var p=new People();
p.category;//'animals'

将代码进行封装,代码如下:

function extend(child, parent) {
    var Empty=function(){};
  Empty.prototype=parent.prototype;
  child.prototype=new Empty();
  child.prototype.constructor=child;
  child.uber=parent.prototype;
}

总结:

a. 这个extend函数,就是YUI库如何实现继承的方法。 b. 为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。相当于在子对象上打开一条通道,可以直接调用父对象的方法。

5)拷贝继承

function Animals(){ }
Animals.prototype.category='animals';

function People(){
  this.name='ww';
  this.say=function(){
    console.log('My name is '+this.name);
  }
}

function extend(child, parent) {
  var p=parent.prototype;
  var c=child.prototype;
  for(var i in p){
    c[i]=p[i];
  }
  c.uber=p;
}

extend(People,Animals);
var p=new People();
p.category;//'animals'

5.2 非构造函数的继承

非构造函数的继承,可以用以下三种方法实现。

1)使用Object

var chinese={
  nation:'中国'
};
var doctor=new Object(chinese);
doctor.carrer='医生';
doctor.nation;//'中国'

总结:

先在父对象的基础上生成子对象,然后再加上子对象本身的属性,这样也能实现继承。

2)浅拷贝

function copy(parent){
  var child={};
  for(var i in parent) { 
    child[i]=parent[i];
  }
  child.uber=parent;
  return child;
}
var chinese={
  nation:'中国',
  birth:['成都','南京','上海']
};
var doctor=copy(chinese);
doctor.carrer='医生';
doctor.nation;//'中国'

doctor.birth.push('北京');
doctor.birth;//["成都", "南京", "上海", "北京"]
chinese.birth;//["成都", "南京", "上海", "北京"]

总结:

a.把父对象的属性,全部拷贝给子对象,也能实现继承。 b.如果父对象的属性等于数组或另一个对象,那么实际上,子对象获得的只是一个内存地址,而不是真正地拷贝,因此存在父对象被篡改的可能。

3)深拷贝

function deepCopy(parent,child){
  var child=child||{};
  for(var i in parent) {
    if (typeof parent[i] === 'object') {
      child[i]=(parent[i].constructor === Array)?[]: {};
      deepCopy(parent[i],child[i]);
    } else {
      child[i]=parent[i];
    }
  }
  return child;
}
var chinese={
  nation:'中国',
  birth:['成都','南京','上海']
};
var doctor=deepCopy(chinese);
doctor.carrer='医生';
doctor.nation;//'中国'

doctor.birth.push('北京');
doctor.birth;//["成都", "南京", "上海", "北京"]
chinese.birth;//["成都", "南京", "上海"]

将代码进行封装,代码如下:

function extend(parent,child){
  var child=child||{};
  for(var i in parent){
    if(typeof parent[i] === 'object'){
      child[i]=(parent[i].constructor === Array)?[]: {};
      extend(parent[i],child[i]);
    }else{
      child[i]=parent[i];
    }
  }
  return child;
}

总结:

a. 所谓"深拷贝",就是能够实现真正意义上的数组和对象的拷贝。它的实现并不难,只要递归调用"浅拷贝"就行了。 b. jQuery库使用的就是这种继承方法。


大总结:

继承的方式如此多,那究竟该用哪个呢? 简单讲实现继承最好的方式有三个:

1.使用apply/call方法; 2.使用“第三者”将父对象的prototype赋值给子对象的prototype; 3.递归拷贝父对象的属性和方法到子对象。


6.异步

将异步之前,先理解下JavaScript的运行机制。

当JavaScript代码被浏览器解析时,会生成一个主线程,同步任务将从上到下依次执行。可是如果遇到耗时很长的异步任务时(如调接口,定时器等),会把一个个异步任务存放在"任务队列"里,执行完同步任务后,"任务队列"通知主线程某个异步任务可以执行了,该任务才会进入主线程执行。只要主线程空了,主线程就会去读取"任务队列","任务队列"反复通知,主线程反复执行,当异步任务都完成后主线程结束,这就是JavaScript的运行机制。

主线程从"任务队列"中读取异步任务,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件轮询)。

所以异步是为了解决JavaScript执行环境是单线程问题。

异步编程有以下几种方法:

1.回调函数 2.事件监听 3.发布/订阅 4.Promises/A规范的对象

1)回调函数

function test(){
    console.log('1');
    setTimeout(function(){
        console.log('2');
    },10);
    console.log('3');
}
test();//1,3,2

function test2(callback){
    console.log('1');
    setTimeout(function(){
        console.log('2');
        callback();
    },10);
}
test2(function(){
    console.log('3');
});//1,2,3

总结:

回调函数的优点:简单,缺点:高度耦合,每个任务只能指定一个回调函数。

2)事件监听

var ww={
    events:new Array(),
    AddNewEvent:function(eventName) {
        var newEvent={
            eventName:eventName,
            eventHandles:new Array()
        };
        this.events.push(newEvent);
        return newEvent;
    },
    GetEventByName:function(eventName) {
        for(var i=0;i<this.events.length;i++){
            if(this.events[i].eventName == eventName){
                return this.events[i];
            }
        }
        return null;
    },
    AddEventhandler:function(eventName,handler){
        var myevent=this.GetEventByName(eventName);
        if(myevent == null){
            myevent=this.AddNewEvent(eventName);
        }
        myevent.eventHandles.push(handler);
    },
    RaiseEvent:function(eventName,params) {
        if(!eventName){
            console.log('no eventName');
            return;
        }
        var myevent=this.GetEventByName(eventName);
        if(myevent != null){
            for(var i=0;i<myevent.eventHandles.length;i++){
                if(myevent.eventHandles[i] != null){
                    if(params != null){
                        myevent.eventHandles[i].call(this, params);
                    }else{
                        myevent.eventHandles[i].call(this);
                    }
                }
            }
        }else{
            console.log('no event');
        }
    }
}

function test2(){
    console.log('1');
    setTimeout(function(){
        console.log('2');
        ww.RaiseEvent('whoNum',{num:'3'});
    },10);
    ww.AddEventhandler('whoNum',function(obj){console.log(obj.num)});
}

test2();//1,2,3

总结:

事件监听的优点:去耦合,缺点:运行流程会变得很不清晰。

3)发布/订阅

var PubSub={};
(function(p){
    var topics={},lastUid=-1;
    p.publish=function(topic,data){
        if(!topics.hasOwnProperty(topic)){
            return false;
        }
        var subscribers=topics[topic];
        for(var i=0,j=subscribers.length;i < j;i++){
          subscribers[i].func(topic,data);
        }
        return true;
    };
    p.subscribe=function(topic,func){
        if(!topics.hasOwnProperty(topic)){
            topics[topic]=[];
        }
        var token=(++lastUid).toString();
        topics[topic].push({token:token,func:func});
        return token;
    };
    p.unsubscribe=function(token){
        for(var m in topics){
            if(topics.hasOwnProperty(m)){
                for(var i=0,len=topics[m].length;i < len;i++){
                    if(topics[m][i].token === token){
                        topics[m].splice(i,1);
                        return token;
                    }
                }
            }
        }
    };
}(PubSub));
function test2(){
    console.log('1');
    setTimeout(function(){
        console.log('2');
        PubSub.publish('whoNum');
    },10);
    PubSub.subscribe('whoNum',function(){console.log('3');})
}
test2();//1,2,3

总结:

事件监听的优点:去耦合,缺点:运行流程会变得很不清晰。

4.Promises/A规范的对象

Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现,如Q, Bluebird, when, rsvp.js, mmDeferred, jQuery.Deffered()等。 下面重点讲下jQuery.Deffered对象。 Deffered对象

Deffered对象

Deffered对象

总结:

1.$.Deferred()生成deferred对象 ()里可以是匿名函数,默认参数为生成的deferred对象 2.promise() 无法操作resolve()、reject() 3.done()相当于success fail()相当于error 4.resolve() 将未完成变成已完成 然后触发done reject() 将未完成变成已失败 然后触发fail 5.then() 把done和fail一起写 then(successFunc,failFunc) 6.$.when() 为多个函数指定同一个回调函数 使用Deferred为了解决异步问题,具体执行步骤: loadData方法、loadHtml方法执行完成后执行C方法 loadData <-- getCategoryList <-- ajax返回的数据 设置接口的值:dtd.resolve(data) ajax 获取接口的值:loadData().done(function(data){使用data}) return $.Deferred()层层调用里面的值


7.高级用法

var data=0;//0,null,undefined,'',false
var channelList=data || 'default'; //'default'

var ww={
  add:function(){
    console.log('add');
  }
};
ww&&ww.add(); //'add'

function($){})(jQuery); //声明带JQuery对象参数的函数
$.fn.extend({}); //给jQuery实例添加方法 $("XXX").method()
$.extend({});//给jQuery类添加方法 $.method()

if(new RegExp('^\\d+$').test(2)){//(/^\d+$/.test(2))
    console.log('type is intager');
}

总结:

JavaScript高级用法不是说写法多么的高级,而是在项目中能起到的作用有多高。真正学好JavaScript并不是件容易的事情,还有很长的路需要走。

历经近一周的撰写,终于要和《JavaScript高级》说再见了,不是说后期不会再写JavaScript,而是现在自己认为该总结的都差不多了,如果有遗漏的地方,我后期还会继续讲解。

这篇文章和上篇文章不适合初学者学习和使用,但是随着知识的积累,相信你们也能随便看懂。 下一篇讲JavaScript的设计模式,请大家尽情期待。

Headshot of Maxi Ferreira

怀着敬畏之心,做好每一件事。