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

最新推荐文章于 2024-09-04 16:05:02 发布

转载最新推荐文章于 2024-09-04 16:05:02 发布 · 158 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Upton/p/5951739.html

本文介绍了一种使用JavaScript实现链式调用的方法。通过构造特定的类和原型方法，可以实现在调用一系列方法后返回当前对象的效果，便于书写流畅的代码。文章通过实例展示了如何创建一个SayHello类，并在其原型上定义SayMorning和SayNight方法来实现链式调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>

转载于:https://www.cnblogs.com/Upton/p/5951739.html