cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1>javascript类模拟</h1>
<input id="m-button" type="button" value="点击"/>
            
          
!
            
              var Class=function(parentClass){
  var kclass=function(){
    this.init.apply(this,arguments);
  };
  if(parentClass){
    var subClass=function(){};
    subClass.prototype=parentClass.prototype;
    kclass.prototype=new subClass();
  }
  kclass.prototype.init=function(){};
  kclass.fn=kclass.prototype;
  kclass.fn.parent=kclass;
  kclass.proxy=function(func){
    var self=this;
    return (function(){
      	func.apply(self,arguments);
    });
  },
  kclass.fn.proxy = kclass.proxy;

  kclass.extend=function(obj){
    for(var i in obj){
      kclass[i]=obj[i];
    }
    if(obj.callback)obj.callback(kclass);
  };
  kclass.include=function(obj){
    for(var i in obj){
      kclass.fn[i]=obj[i];
    }
    if(obj.callback)obj.callback(kclass);
  };
  return kclass;
};



//第一个例子:类生成,实例生成
var Person=new Class();
Person.extend({
  "say":function(say){
    console.log(say);
  }
});
Person.include({
  "getWork":function(workName){
    return workName;
  }
});
Person.say("i can say");
var lili=new Person();

lili.getWork("计算机");
//第二个例子:继承
var Animal = new Class();
Animal.extend({
say: function(){
console.log('say');
}
});
Animal.include({
breath: function(){
console.log('breath');
}
});
var Cat = new Class(Animal);
// 用法
var tommy = new Cat();
//tommy.say(); say不是原型方法 无法被继承
tommy.breath();
//第三个例子:控制作用域proxy函数
var Button = new Class();
Button.include({
init: function(element){
this.element = jQuery(element);
// 代理了这个click 函数
this.element.click(this.proxy(this.click));
},
click: function(){ console.log(this)}
});

var click_m_button=new Button();
click_m_button.init("#m-button");



            
          
!
999px
Loading ..................

Console