前几天面试,有一个问题是使用构造函数实现链式调用,后面查看了一些简单的资料,整理一下

首先,先说一下JS 中构造函数和普通函数的区别,主要分为以下几点

1、构造函数也是一个普通函数,创建方式和普通函数一样,但构造函数习惯上首字母大写

2、构造函数和普通函数的区别在于:调用方式不一样。作用也不一样(构造函数用来新建实例对象)

3、调用方式不一样。
a. 普通函数的调用方式:直接调用 person();
b.构造函数的调用方式:需要使用new关键字来调用 new Person(); 4、构造函数的函数名与类名相同:Person( ) 这个构造函数,Person 既是函数名,也是这个对象的类名 5、内部用this 来构造属性和方法

如果我想新建一个构造函数,并新建其实例对象,那么我会这么做,举个栗子:

        function Person(name,job,age){
this.name=name;
this.job=job;
this.age=age;
this.sayHi=function(a){
console.log(a)
return this
}
this.sayHello=function(b){
console.log(b)
}
}

可以看到如果我调用此构造函数的话,新建的对象会有五个属性,包括:name,job,age和两个函数属性,如下

var student = new Person("小k","coder","28");
console.log(student);

可以看到我在写构造函数的时候在 sayHi 中有 return this ,sayHello 中没有

此时我分别按不同的顺序链式调用两个函数参数,会得到不同的结果:

console.log(student.sayHi("hi").sayHello("hello"))
console.log(student.sayHello("hello").sayHi("hi"))

可以看到,如果我没有return this 的话链式调用是不成功的,因为sayHello默认的返回值是underfind,而underfind是没有sayHi 方法的。

由此可见,要实现链式调用,必须在构造函数的函数属性中return this,即:将this指向的本对象作为返回值,

this默认的指向为函数运行上下文,

当然this的指向并没有这么简单,此文不做赘述。

javascript 链式调用+构造函数的更多相关文章

  1. Javascript链式调用案例

    jQuery用的就是链式调用.像一条连接一样调用方法. 链式调用的核心就是return this;,每个方法都返回对象本身. 下面是简单的模拟jQuery的代码, <script> win ...

  2. javascript链式调用实现方式总结

    方法链一般适合对一个对象进行连续操作(集中在一句代码).一定程度上可以减少代码量,缺点是它占用了函数的返回值. 一.方法体内返回对象实例自身(this) function ClassA(){ this ...

  3. Javascript 链式操作以及流程控制

    春节过后,感觉过年吃的油腻的食品转化的脂肪都长到 脑子去了. 根本转不动啊 上班第一天 实在是写不动代码了, 顺手打开多天为看的 收件箱,查看查看邮件,看看春节期间 风云变幻的前端圈又有哪些大事发生. ...

  4. js链式调用 柯里化

    var d = 1; d.add(2).add(3).add(4) //输出10 写出这个add函数 Number.prototype.add = function(x){ return this + ...

  5. javascript方法链式调用和构造函数链式调用对比

    先说一下方法链:B的实例从A继承了A中的同名方法,如果B的方法重载了A中的方法,B中的重载方法可能会调用A中的重载方法,这种方法称为方法链. 构造函数链:子类的构造函数B()有时需要调用父类的构造函数 ...

  6. JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承

    说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...

  7. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  8. JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } swi ...

  9. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

随机推荐

  1. CF 11D A Simple Task 题解

    题面 这道题的数据范围一看就是dfs或状压啦~ 本文以状压的方式来讲解 f[i][j]表示目前的节点是i,已经经历过的节点的状态为j的简单环的个数: 具体的转移方程和细节请看代码: PS:(i& ...

  2. css精灵图使用

    1. 精灵技术的使用 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的b ...

  3. Android尺寸适配问题

    1, 布局与组件大小用dp,文字大小用sp 2,

  4. 均值滤波器(平滑空间滤波器)基本原理及Python实现

    1. 基本原理 使用元素的领域内像素的平均值代替该元素,可明显的降低图像灰度的尖锐变换.它的一种重要应用是模糊处理:得到感兴趣的区域的粗略表示,将次要的/小的元素与背景融合,使得主要的/较大的元素变得 ...

  5. PropertyUtilsBean 将bean转成map

    public static Map<String,String> beanToMap(Object bean) { Map<String,String> params =Map ...

  6. 15. AutoMapper 之映射继承(Mapping Inheritance)

    https://www.jianshu.com/p/e4f05403bd13 映射继承(Mapping Inheritance) 映射继承有两个功能: 从基类或接口配置继承映射配置 运行时多态映射 继 ...

  7. python:count 函数

    API 一.string 中 某字符 的次数 str.count(sub, start= 0,end=len(string)) Args Annotations sub 搜索的子字符串 start 字 ...

  8. 普通交叉验证(OCV)和广义交叉验证(GCV)

    普通交叉验证OCV OCV是由Allen(1974)在回归背景下提出的,之后Wahba和Wold(1975)在讨论 了确定多项式回归中多项式次数的背景,在光滑样条背景下提出OCV. Craven和Wa ...

  9. decode与case when 函数

    百度百科: DECODE函数,是ORACLE公司的SQL软件ORACLE PL/SQL所提供的特有函数计算方式,以其简洁的运算方式,可控的数据模型和灵活的格式转换而闻名. DECODE 中的if-th ...

  10. 关于在docker中配置elasticsearch容器的方法

    一.关于docker的安装,注意几点 1.如果系统是Win10家庭版,是没有Hyper-V的,所以无法安装docker(运行docker安装包会报错),为此docker官网提供的解决方法是安装dock ...