js面向对象的几种写法

Posted 2020-07-09 EvileOn

有段时间没写js了，复习了一下js相关的东西，把面向对象的部分挑出来做个记录。以下代码综合别的博客，但都是经过自己验证。

1，工厂方式

 var Circle = function(){

    var obj =  new Object();
    obj.PI = 3.14;

    obj.area = function(r){
        return this.PI * r * r;
    }

    return obj;
}
var c = new Circle();
alert(c.area(1.0));//结果为1

2，比较正规的写法 （构造函数的方式）

 

function Circle(r){
    this.r = r;
}

//静态变量
Circle.PI = 3.14;

//原型方法
Circle.prototype.area = function(){
    return Circle.PI * this.r * this.r ;
}

var c = new Circle(3);

console.log(c.area()); //结果为28.259999999999998 

 总结 ： 无需在函数的内部重新创建对象，而使用this指代，并且函数无需明确的return

 

3，json写法

var Circle = {
    "PI" : 3.14,
    "area" : function(r){
        return this.PI * r * r;
    }
};

console.log(Circle.area(2)); //结果为：12.56 

 

 第三种写法的小实例

 var show = {

    btn : $(‘.div‘),
    init : function(){
        var that = this;
        alert(this);
        this.btn.click(function{
            that.change();
            alert(this);
        });
    },
    change : function(){
        this.btn.css({‘background‘:‘green‘});
    }
}

show.init();//注意其中this的指向问题 

 

4,其实和第一种实质是一样的

var Circle = function(r){
    this.r = r;
}

Circle.PI = 3.14;
Circle.prototype = {
    area : function(){
        return this.r * this.r * Circle.PI;
    }
}

var obj = new Circle(4);

console.log(obj.area()); //结果为：50.24

 

5， 最后一种

var Circle = new Function("this.PI = 3.14;this.area = function(r){return r*r*this.PI;}");
obj = new Circle();

console.log(obj.area(4)); //结果为：50.24 

总结：个人不是很推荐这种写法，有些混乱。 

 

其中我个人比较喜欢的写法如下:

function Circle(r){
    this.r = r;
}

// 静态变量
Circle.PI = 3.14;
//原型方法
Circle.prototype.area = function(){
    return this.r * this.r * Circle.PI;
}

var obj = new Circle(4);

console.log(obj.area());  //结果为：50.24

 

 可以看到一样的结果，感觉这种写法更符合我的习惯，当然js是比较自由的，只要语法没有错误，你可以选择任何一和自己喜欢的方式去实现自己想要的效果。