<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<input type="text" id="content">
<button type="button" id="btn">click</button>
</div>
<script>
window.onload = function(){
var oContent = document.getElementById('content');
var oBtn = document.getElementById('btn');

var SayHello = function(){
this.content = '';
};
SayHello.prototype = {
SayMorning: function(){
this.content += 'good morning';

//每次调用返回this也就是调用函数的对象
return this;
},
SayNight: function(){
this.content += 'good night';
return this;
}
}

oBtn.addEventListener('click', function(){
var sayhello = new SayHello();

//在这里地阿姨那个SayMorning之后返回了调用对象sayhello 
sayhello.SayMorning().SayNight();//这里相当于sayhello.SayMorning(),sayhello.SayNight();
oContent.value = sayhello.content;
},false);
}
</script>
</body>
</html>

用原生js实现的链式调用函数的更多相关文章

  1. 原生JS数组操作的6个函数 arr.forEach arr.map arr.filter arr.some arr.every arr.findIndex

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Javscript的函数链式调用基础篇

    我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作: $('#div').css('background','#ccc').removeClass('box').stop(). ...

  3. 原生js仿jquery一些常用方法

    原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   最近迷上了原 ...

  4. 原生JS封装创建多级菜单函数

    手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码. ...

  5. JS的作用域链与this指向

    JS的作用域链是在函数创建时创建的.而this对象是在函数运行期间绑定的. 下面看几个例子,说明JS的作用域链和this是两套分离的链. 1) var name = 'window下的name< ...

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

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

  7. 原生JS实现jquery的链式编程。

    这是我根据之前遇到的一个面试题,题目:用原生JS实现$("#ct").on("click",fn).attr("id"). 然后看了篇jqu ...

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

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

  9. js链式调用 柯里化

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

随机推荐

  1. opencv_haar分类器的训练

    本文为作者原创,未经允许不得转载:原文由作者发表在博客园: http://www.cnblogs.com/panxiaochun/p/5345412.html 因为工作的原因,本人需要用到分类器来检测 ...

  2. CF724B. Batch Sort[枚举]

    B. Batch Sort time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  3. struts之类型转换

    Struts2的内置类型转换器: Struts2的内置类型转换器,可以为你处理大多数的类型转换,这包括了以下类型和String类型之间的转换! 1.String 将int,double,boolean ...

  4. node-sass安装不成功的解决方案

    最近在学webpack,需要用到sass-loader加载器解析.scss文件,安装sass-loader,必须先安装node-sass,node-sass纠正了两天,用npm install nod ...

  5. Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds...

    仰天长啸   Server Tomcat v6.0 Server at localhost was unable to start within 45 seconds... 当启动tomcat时候出现 ...

  6. StackExchange.Redis通用封装类分享(转)

    阅读目录 ConnectionMultiplexer 封装 RedisHelper 通用操作类封 String类型的封装 List类型的封装 Hash类型的封装 SortedSet 类型的封装 key ...

  7. 代码生成工具——Entity Framework Power Tools

    Entity Framework Power Tools是VS上的一个根据数据库生成Model的Code First映射工具.在VS里面右键即可看到.什么,没有? 别慌,可以单独下载的,见 https ...

  8. 【jQuery api】 $.type(obj)

    用来获取JavaScript数据类型[[Class]]的对象 <!DOCTYPE html> <html> <head> <script src=" ...

  9. CDH安装

    离线安装Cloudera Manager 5和CDH5(最新版5.1.3) 完全教程 关于CDH和Cloudera Manager CDH (Cloudera's Distribution, incl ...

  10. awk 用法（使用入门）

    转自:http://www.cnblogs.com/emanlee/p/3327576.html awk 用法:awk ' pattern {action} '  变量名    含义 ARGC   命 ...