用原型封装一个操作DOM的例子
<script> // 一句话 在构造函数里面写属性 在原型里面写方法 function Elem(d){ this.even=document.getElementById(d); } Elem.prototype.html=function(val){ var e = this.even; if(val){ e.innerHTML=val; return this; // 链式操作 返回整个这个Elem.prototype.html整体 ,不写这个return 就不能进行链式操作 }else{ return e.innerHTML; } } Elem.prototype.on=function(type,fn){ var e = this.even; e.addEventListener(type,fn); return this;//同理 也是为了能够继续链式操作 } var box = new Elem('page-info'); // box.html('123') // box.on('click',function(){ // alert('test') // }) // 上面注释部分的链式操作 // box.html('123').on('click',function(){ alert('test')}) box.html('123').on('click',function(){ alert('test')}).html('从123变成456') </script>
字面量形式的原型
var vehicle = function(){ this.door=4; } vehicle.prototype ={ getName: function(){ return 'vehicle' }, getInfo: function(){ return [ this.getName(),'has',this.door,'doors' ].join(',') } } var vehicle = new vehicle(); console.log(vehicle.getInfo()) // vehicle,has,4,doors
链式赋值说明
let a = b = c = 12 链式赋值会创建隐形的全局变量 不建议这样赋值 建议如下 let a; let b; let c;