js链式写法

前言:前不久阿里远程面试时问了我一个问题,如下:

function Person(){};varperson  =new Person();//实现person.set(10).get()返回20

当时正在问我原型链的问题,所以面试官直接用我写的person问的,我当时是这么实现的:

function Person(){};

var person  =new Person();

person.set =function(n){

  return {

    get:function(){

      returnn*2;

  }}

}

返回结果其实也对,但set()和get()耦合太紧,不灵活。再联想一下当时正在考我原型链,且面试开始时问了我jQuery的链式操作原理(没答上来),所以感觉这题应该跟链式操作有关,于是上网查了查,确实是要用链式操作。先来看看链式操作的原理和js如何实现。

js实现链式操作

jQuery有一个十分强大的特点:链式操作。其实原理很简单,就是每次方法执行完后返回this对象,这样后面的方法就可以继续在this环境下执行。先来实现一下:

//创建一个类function Person(){};

//在原型上定义相关方法

Person.prototype ={

  setName:function(){

    this.name = name;

    returnthis;

  },

  setAge:function(){

    this.age = age;

    returnthis;

  }

}

//实例化varperson=new Person();

person.setName("Mary").setAge(20);

以上过程就实现了链式操作,而原理只是在每个方法调用后返回了this。jQuery中不用new一个实例化对象,所以可以将实例化过程封装如下:

//将实例化过程封装为一个函数

function newObj(){

  returnnew Person();

}

newObj().setName("Mary").setAge(20);

此时再想想上面的那道题,就很简单了:

function Person(){};

//实现部分Person.prototype ={

  set:function(value){

    this.value = value;

    returnthis;

  },

  get:function(){

    returnthis.value*2;//由于要返回值,且不需要继续调用方法,所以不返回this

}

}

var person =new Person();

console.log(person.set(10).get());//20

链式操作的优缺点

首先来说说缺点。

根据上面阿里面试题的实现,我们可以看出,get方法里不能返回this,因为有值需要返回。这就是链式操作的一个局限:只能应用在不需要返回值的情况下,或者只能最后一步需要返回值。jQuery主要是对DOM元素的操作,只需要改变DOM元素的表现而不需要返回值,所以适合链式操作。

再来说说优点。

js的执行环境为单线程,为了避免阻塞,我们时常用一些异步编程方式来完成一些可能产生阻塞的操作。常见的异步编程方式包括回调函数、事件监听、ES6中的Promise对象。

链式操作实际上就是使得异步编程的流程更加清晰,不会像回调函数一样相互耦合,难以分辨函数的执行顺序且维护困难。ES6中的Promise也正是沿用了这一思想,每一个异步任务返回一个Promise对象,通过then方法指定回调函数。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 9,298评论 0 3
  • 对于开发人员来说,设计模式有时候就是一道坎,但是设计模式又非常有用,过了这道坎,它可以让你水平提高一个档次。而在a...
    WANKUN阅读 273评论 0 2
  • PNG 有PNG8和truecolor PNG PNG8类似GIF颜色上限为256,文件小,支持alpha透明度,...
    hudaren阅读 1,588评论 0 0
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 9,504评论 0 13
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,849评论 2 9