javascript中的链式操作_javascript 操作链

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

实例代码一:

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

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

实例代码二:

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

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

报错了，说 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类型）
    }
}

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

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

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

总结:

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){



还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！


王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。


对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！


【完整版领取方式在文末！！】


***93道网络安全面试题***


![](https://img-blog.csdnimg.cn/img_convert/6679c89ccd849f9504c48bb02882ef8d.png)








![](https://img-blog.csdnimg.cn/img_convert/07ce1a919614bde78921fb2f8ddf0c2f.png)





![](https://img-blog.csdnimg.cn/img_convert/44238619c3ba2d672b5b8dc4a529b01d.png)





内容实在太多，不一一截图了


### 黑客学习资源推荐


最后给大家分享一份全套的网络安全学习资料，给那些想学习 网络安全的小伙伴们一点帮助！


对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。


😝朋友们如果有需要的话，可以联系领取~

#### 1️⃣零基础入门


##### ① 学习路线


对于从来没有接触过网络安全的同学，我们帮你准备了详细的**学习成长路线图**。可以说是**最科学最系统的学习路线**，大家跟着这个大的方向学习准没问题。


![image](https://img-blog.csdnimg.cn/img_convert/acb3c4714e29498573a58a3c79c775da.gif#pic_center)


##### ② 路线对应学习视频


同时每个成长路线对应的板块都有配套的视频提供：


![image-20231025112050764](https://img-blog.csdnimg.cn/874ad4fd3dbe4f6bb3bff17885655014.png#pic_center)


#### 2️⃣视频配套工具&国内外网安书籍、文档


##### ① 工具


![](https://img-blog.csdnimg.cn/img_convert/d3f08d9a26927e48b1332a38401b3369.png#pic_center)


##### ② 视频


![image1](https://img-blog.csdnimg.cn/img_convert/f18acc028dc224b7ace77f2e260ba222.png#pic_center)


##### ③ 书籍


![image2](https://img-blog.csdnimg.cn/img_convert/769b7e13b39771b3a6e4397753dab12e.png#pic_center)

资源较为敏感，未展示全面，需要的最下面获取

![在这里插入图片描述](https://img-blog.csdnimg.cn/e4f9ac066e8c485f8407a99619f9c5b5.png#pic_center)![在这里插入图片描述](https://img-blog.csdnimg.cn/111f5462e7df433b981dc2430bb9ad39.png#pic_center)


##### ② 简历模板


![在这里插入图片描述](https://img-blog.csdnimg.cn/504b8be96bfa4dfb8befc2af49aabfa2.png#pic_center)

 **因篇幅有限，资料较为敏感仅展示部分资料，添加上方即可获取👆**