小小千想和您聊一聊

当前位置: 首页> 技术分享> web前端教程之javascript中的链式操作

web前端教程之javascript中的链式操作

阅读本文,要求熟悉JQ并具备一定的JS基本功,对原型有所了解。

 

说到javascript的链式编程,相信很多前端开发者就不由大脑的想到jquery的链式操作.

很多人最早开始接触链式操作,就是从这开始的。

 

实例代码一:

$(".box").height(200).width(200);

这段代码就是给一个类名称为.box的元素 设置高度,又设置宽度;

实例代码二:

$(".box").height().width();

实例代码二运行后结果如下:

<img src="https://pic3.zhimg.com/v2-99e00f66c225e95331c26ebadc3e73b2_b.jpg" data-caption="" data-size="normal" data-rawwidth="590" data-rawheight="146" class="origin_image zh-lightbox-thumb" width="590" data-original="https://pic3.zhimg.com/v2-99e00f66c225e95331c26ebadc3e73b2_r.jpg"/>

报错了,说 width 不是一个函数, 这是为什么呢?

明明jquery中有这width这个方法啊

 

实际上JQ大致原理是这样的:

//以下为原理说明,非JQ源码

 

function $(){

    var obj = 封装...

    return obj;

}

$.prototype.width = function(val){

    if(val){

        修改宽度...

        return this;  //当函数有参时,操作完成,返回JQ对象本身

    } else {

        return 宽度;  //当函数无参时,则返回宽度(number类型)

    }

}

$.prototype.height = function(val){

    if(val){

        修改高度...

        return this;  //当函数有参时,操作完成,返回JQ对象本身

    } else {

        return 高度;  //当函数无参时,则返回高度(number类型)

    }

}

 

回到代码实例一当中,过程如下图所示:

<img src="https://pic4.zhimg.com/v2-c44a4925191a4b6611417107fe12311b_b.jpg" data-caption="" data-size="normal" data-rawwidth="783" data-rawheight="528" class="origin_image zh-lightbox-thumb" width="783" data-original="https://pic4.zhimg.com/v2-c44a4925191a4b6611417107fe12311b_r.jpg"/>

在实例代码二中,height()方法是获取元素的高度,它会返回元素的高度,是一个数字。

我们无法对着一个数字调用方法,因此链式调用就中断了,过程如下图:

<img src="https://pic1.zhimg.com/v2-163980bc9e22bf01ee4285b7f25eef24_b.jpg" data-caption="" data-size="normal" data-rawwidth="1026" data-rawheight="528" class="origin_image zh-lightbox-thumb" width="1026" data-original="https://pic1.zhimg.com/v2-163980bc9e22bf01ee4285b7f25eef24_r.jpg"/>

总结:

jquery的链式编程,一般用于设置操作,不能会用于获取操作;
因为设置操作不必返回设置后的结果,而获取必须返回具体的值;

链式调用的核心,就是函数在执行完成后,返回了this,即当前对象

 

接下来,我们自己用javascript来练习一下

function Person(){

    this.age=20;//默认值为20;

}

    

    //通过原型给 Person构造函数上添加一个设置年龄的方法    

    Person.prototype.setAge=function(num){

            this.age=num;

    }

    

    //通过原型给 Person构造函数上添加一个获取年龄的方法  

    Person.prototype.getAge=function(){

            return this.age;

    }

链式调用

console.log(new Person().setAge(30).getAge()); //报错

错误提示:没有getAge属性

我们又把上面的Person构造函数代码改动一下 加上retrun this;

//通过原型给 Person构造函数上添加一个设置年龄的方法    

    Person.prototype.setAge=function(num){

            this.age=num;

            return this;

    }

再次运行

console.log(new Person().setAge(30).getAge()); //30

 

再次总结

javascript的链式编程的核心就是 return this;

链式编程的优点:

代码变得简洁,优雅;

链式编程的缺点:

过长的链式,会容易造成操作不明确,难以维护,不利于理解;

上一篇:web前端教程之JS栈结构的简单封装

下一篇:web前端教程之不使用var定义的变量

QQ技术交流群

HTML5/Web前端锋迷群
712051083

加入群聊

用户登录

手机号:

密码:

图形验证码:

点击切换

用户注册

手机号:

登录密码:

图形验证码:

点击切换

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

手机号:

图形验证码:

短信验证码:

获取验证码

忘记密码

1安全验证

2重置密码

新密码:

确认新密码:

获取课程

添加小千老师微信,获取课程信息

如何获取课程?

一、需拥有此本教材

如没有,可点击下方入口购买当当购买入口京东购买入口

二、添加小千老师,发送拥有凭证,解锁课程资源

1.购买该教材的订单信息
2.拥有的实体书信息等

更换手机号

新手机号:

图形验证码:

短信验证码:

获取验证码