用原生js实现的链式调用函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用原生js实现的链式调用函数相关的知识,希望对你有一定的参考价值。

<!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实现的链式调用函数的主要内容,如果未能解决你的问题,请参考以下文章

链式调用就是promise的优点吗?

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

js实现方法的链式调用

原生JS模拟Promise实现详解

javascript Js实现了延迟链式调用

深入理解 promise:promise的三种状态与链式调用