当前位置:网站首页 / web开发 / 正文

[ay web]写给ay的123篇web前端博客【3】- js 类的高级写法

时间:2016年01月04日 | 作者 : aaronyang | 分类 : web开发 | 浏览: 1483次 | 评论 0

有幸在网上看到snandy的博客,学到了js中的,类的实现写法,很是收益,拿出来分享下了

DEMO1

<script type="text/javascript">
  function Person(name) {
    this.name = name;
    this.getName = function() {
        return this.name;
    }
 } 
 
var p1 = new Person("Jack");
var p2 = new Person("Tom");
console.log(p1 instanceof Person);//true
console.log(" "+p1.getName());
console.log(p2 instanceof Person);//true
console.log(" "+p2.getName());
</script>

2016年1月4日 www.ayjs.net   未经许可,不许转载,违者追究法律责任


blob.png

同样代码也可以这样写

<script type="text/javascript">
  function getName(){
       return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;
 } 
 
var p1 = new Person("Jack");
var p2 = new Person("Tom");
console.log(p1 instanceof Person);//true
console.log(" "+p1.getName());
console.log(p2 instanceof Person);//true
console.log(" "+p2.getName());
</script>


2016年1月4日 www.ayjs.net   未经许可,不许转载,违者追  究法律责任

demo2 prototype方式

<script type="text/javascript">

  function Person(name) {
    this.name = name;
    Person.prototype.getName=function(){
        return this.name;
    }
 } 
 
var p1 = new Person("Jack");
var p2 = new Person("Tom");
console.log(p1 instanceof Person);//true
console.log(" "+p1.getName());
console.log(p2 instanceof Person);//true
console.log(" "+p2.getName());
</script>


效果如demo1

但每次new一个对象的时候都会执行下面这行代码,我们修改一下,类似C#的 委托,只赋值一次

blob.png


优化后,如下:

<script type="text/javascript">

  function Person(name) {
    this.name = name;
    if(Person._init==undefined) {    
        Person.prototype.getName = function() {
            return this.name;
        }
        Person._init = 1;  
    }  
 } 
 
var p1 = new Person("Jack");
var p2 = new Person("Tom");
console.log(p1 instanceof Person);//true
console.log(" "+p1.getName());
console.log(p2 instanceof Person);//true
console.log(" "+p2.getName());

</script>


2016年1月4日 www.ayjs.net   未经许可,不许转载,违者追究法律责任

DEMO3  构造函数 + 原型 直接组装一个类;同一构造函数将组装出同一类型

添加一个辅助方法

/**
 * $class 写类工具函数之一
 * @param {Function} constructor
 * @param {Object} prototype
 */
function $class(constructor,prototype) {
    var c = constructor || function(){};
    var p = prototype || {};
    c.prototype = p;
    return c;
}
function Person(name) {
    this.name = name;
 } 
 var proto = {
    getName : function(){return this.name},
    setName : function(name){this.name = name;}
} 

var Man = $class(Person,proto);
var Woman = $class(Person,proto);

console.log(Man == Woman); //true
console.log(Man.prototype == Woman.prototype); //true


blob.png

总结:这种方式,类似扩展方法,也像 继承..

使用

var man = new Man("Andy");
var woman = new Woman("Lily");
 
console.log(man instanceof Man); //true
console.log(woman instanceof Woman); //true
console.log(man instanceof Person); //true
console.log(woman instanceof Person); //true


blob.png

2016年1月4日 www.ayjs.net   未经许可,不许转载,违者追究法律责任


但是这行代码是false

console.log(man.constructor == Person); //false

blob.png

原因就在于class中重写了Person的原型:c.prototype=p;好了,我们把class稍微改写下,将方法都挂在构造器的原型上(而不是重写构造器的原型),如下:

function $class(constructor,prototype) {
    var c = constructor || function(){};
    var p = prototype || {};
//  c.prototype = p;
    for(var atr in p){
        c.prototype[atr] = p[atr];
    }  
    return c;
}
 console.log(man instanceof Woman); //true






DEMO4 构造函数+原型 组装一个类;同一构造函数可以定义出多个类型

<script type="text/javascript">
/**
 * $class 写类工具函数之二
 * @param {Function} constructor
 * @param {Object} prototype
 */
function $class(constructor,prototype) {
    var c = constructor || function(){};
    var p = prototype || {};   
    return function() {
        for(var atr in p) {
            arguments.callee.prototype[atr] = p[atr];
        }          
        c.apply(this,arguments);
    }
}


//构造函数
function Person(name) {
    this.name = name;
}
//原型对象
var proto = {
    getName : function(){return this.name},
    setName : function(name){this.name = name;}
}
//写两个类
var Man = $class(Person,proto);
var Woman = $class(Person,proto);


// 同一个构造函数(Person)定义不同的类
console.log(Man == Woman); //false



</script>

与上一个不同的是,虽然Man和Woman都是用Person,proto组装的。但Man却不等于Woman。即同一个构造函数(Person)可以定义出不同的类

测试使用

var man = new Man("ay");
console.log(man.getName());
man.setName('ay2015');
console.log(man.getName());

blob.png



DEMO5

<!--demo5-->
<script type="text/javascript">

/**
 * $class 写类工具函数之三
 * @param {String} className
 * @param {Function} superClass
 * @param {Function} classImp
 */
function $class(className, superClass, classImp){
    if (superClass === "") superClass = Object;
    function clazz(){
        if(typeof this.init == "function"){
            this.init.apply(this, arguments);
        }
    }
    var p = clazz.prototype = new superClass();
    var _super = superClass.prototype;
    window[className] = clazz;
    classImp.apply(p, [_super]);
}

$class('Person', '', function(){
    // 构造函数
    this.init = function(name){
        this.name = name;
    };
    // 方法体
    this.getName = function(){
        return this.name;
    };
    this.setName = function(name){
        this.name = name;
    };
});

var p = new Person('Jack');
console.log(p);
console.log(p.constructor == Person); // false  

</script>

使用该工具函数写类需注意,this.init方法必不可少。使用过Prototype库的同学会知道Class.create后的initialize方法也是必不可少的。

因为没考虑继承,第二个参数superClass使用空字符串,即默认继承于Object。

从输出为false可看到,这个工具类没有去维护constructor属性。 设计的每一种写类方式都是有取舍的,这完全取决于设计者的意图。



DEMO6   别人库的实体创建

Prototype中使用Class.create方法

<script type="text/javascript">
//类名Person
var Person = Class.create();
 
//通过原型重写来定义Person
Person.prototype = {
    initialize : function(name) {
        this.name = name;
    },
    getName : function() {
        return this.name;
    },
    setName : function(name) {
        this.name = name;
    }  
}
 
//创建对象
var p = new Person("jack");
console.log(p.constructor == Person);//false

</script>


initialize完成对象的初始化(相当于构造函数,必不可少),方法依次往下写即可。

有个问题,但是p.constructor == Person却为false,这正是Prototype库一个小缺陷。原因是重写了Person的原型。为了使constructor能指向正确的构造器,只需在原型重写时维护好constructor属性即可。

Person.prototype = {
    constructor : Person, //注意这句将修复constructor属性
    initialize : function(name) {
        this.name = name;
    },
    getName : function() {
        return this.name;
    },
    setName : function(name) {
        this.name = name;
    }  
}


2016年1月4日 www.ayjs.net   未经许可,不许转载,违者追究法律责任

2,Dojo的写类方式

dojo中用dojo.declare方法来定义一个类。dojo.declare有三个参数

参数1:类名className 

参数2:继承的类superclass 

参数3:构造器,方法props 


单纯的定义一个类实际只需传第一,三两个参数。因为这里只讨论如何定义一个类,不讨论继承。

//定义类名
var className = "Person";
//定义构造器及方法
var proto = {
    constructor : function(name){this.name=name;},
    getName : function(){ return this.name;},
    setName : function(name){ this.name = name;}
}
 
//定义类Person
dojo.declare(className,null,proto);
 
//创建一个对象
var p = new Person("tom");
console.log(p.getName());//tom
p.setName("jack");
console.log(p.getName());//jack
 
//测试instanceof及p.constructor是否正确指向了Person
console.log(p instanceof Person);//true
console.log(p.constructor === Person);//true




3,Ext的写类方式

Ext中用Ext.extend来定义一个类(当然它更多用来扩展一个类),Ext整个框架各种控件如Panel,MessageBox等都是用Ext.extend方法来扩展。这里仅仅用它来定义一个最简单的类。

这里只需传两个参数即可,第一个参数是根类Object,第二个是原型。比较特殊的是,如果单纯的定义一个类,那么第一个参数永远传Object即可。

/**
 * Person类
 * @param {Object} name
 */
var Person = Ext.extend(Object,{
    constructor : function(name) {this.name = name;},
    setName : function(name) {this.name = name;},
    getName : function() {return this.name;}
});
 
//创建一个对象
var p = new Person("Lily");
console.log(p.getName());//Lily
p.setName("Andy");
console.log(p.getName());//Andy
 
//测试instanceof及p.constructor是否正确指向了Person  
console.log(p instanceof Person);//true
console.log(p.constructor == Person);//true




4. YUI的写类方式

//定义包名
YAHOO.namespace("test");
 
//定义类
YAHOO.test.Person = function(name) {
    this.name = name;
}
YAHOO.test.Person.prototype.setName = function(name){ this.name = name;}
YAHOO.test.Person.prototype.getName = function(){ return this.name;}
 
 
//创建一个对象
var p = new YAHOO.test.Person("jack");
 
console.log(p.getName());//jack
p.setName('tom');
console.log(p.getName());//tom
 
//测试instanceof及p.constructor是否正确指向了YAHOO.test.Person  
console.log(p instanceof YAHOO.test.Person);
console.log(p.constructor == YAHOO.test.Person);

可以看出除了多了包名,与原始的 构造函数+原型 方式 并无区别。





5,Mootools的写类方式

mootools是被设计成非常紧凑的,模块化的,面向对象的JS库。mootools中写类用Class类。导入后我们写类时只需要用Class就行了。

/**
 * Person类
 * @param {Object} name
 */
var Person = new Class({   
    initialize: function(name){
        this.name = name;
    },
    setName : function(name) {
        this.name = name;
    },
    getName : function() {
        return this.name;
    }
})
 
//new一个对象
var p = new Person("jack");
 
//测试set,get方法
console.log(p.getName());//jac
p.setName('andy');
console.log(p.getName());//andy
 
//测试instanceof及p.constructor是否正确指向了Person 
console.log(p instanceof Person); //true
console.log(p.constructor == Person);  //true



参考文章: 文章查看







推荐您阅读更多有关于“web,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘.NET,Java,Web前端,有想找想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui,可以看到我的很多作品效果

AYUI8社区版Github地址:前往获取

作者:杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2015年1月17日开始,兴趣学习研究WPF,目前工作繁忙,不接任何活

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表