js构建类的方法

心已赠人 2021-09-29 14:52 261阅读 0赞

Javascript是一种基于对象的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有C`lass`。（不过，ES6引入了Class这个概念，作为对象的模板。通过`class`关键字，可以定义类。ES6入门：http://es6.ruanyifeng.com/）。

但是在项目开发中，经常用到JS面向对象开发，这就需要我们去**用JS创建类，从而去实例化一些对象**。接下来我们介绍一下在JS中创建类的几种方式：

# 　　1、工厂方式 #

![复制代码][copycode.gif]

//通过工厂方式创建对象，先定义一个工厂方法
    function createObj(){
        var obj = new Object();
        obj.name="xxx";
        obj.say=function(){
            alert("我是xxx");
        }
        return obj;
    }
    //调用工厂方法创建对象:
    var obj1  =  createObj();
    
    
    //也可以用这种形式
    function createObj(){
        var obj = {}; //这样生成对象
        obj.name="xxx";
        obj.say=function(){
            alert("我是xxx");
        }
        return obj;
    }
    var obj1  =  createObj();

![复制代码][copycode.gif]

**这种方式的问题是每一次通过工厂方法去创建一个对象，这个对象的属性name和方法say都必须重新创建一次，浪费内存。**

# 　　2、构造器方式 #

![复制代码][copycode.gif]

//创建一个构造器，构造函数首字母大写
    function Obj(){
        this.name="xxx";
        this.say=function(){
            alert("我是xxx");
        };
    }
    //利用构造器，通过new关键字生成对象
    var obj1=new Obj();

![复制代码][copycode.gif]

这是最基本的方式，但是也存在和工厂方式一样的毛病。

# 　　3、原型方式 #

![复制代码][copycode.gif]

//用空函数创建一个类
    function Obj(){
    }
    //在类的原型链上添加属性和方法
    Obj.prototype.name="xxx";
    Obj.prototype.say=function(){
        alert("我是xxx");
    }
    //生成对象
    var obj1=new Obj();

![复制代码][copycode.gif]

这个方式的缺点是，**当有引用属性时，改变一个对象的这个属性也会改变其他对象的这个属性**。因为一个引用属性，都是指向的同一个地方。

# 　　4、原型/构造联合方式 #

![复制代码][copycode.gif]

//用构造函数定义对象的非函数属性
    function Obj(name){
        this.name=name;
        this.arr=new Array('a','b');
    }
    //用原型方式定义对象的方法
    Obj.prototype.say=function(){
        alert("我是xxx");
    }
    //生成对象
    var obj1 = new Obj('xxx');

![复制代码][copycode.gif]

这种是**目前用的最多的创建类和对象的方式**，将方法和属性用不同的方式封装。

# 　　5.动态原型方式 #

![复制代码][copycode.gif]

//动态原型方式和原型/构造混合方式的原理相似，唯一的区别就是赋予对象方法的位置
    function Person(name, sex) {
        this.name = name;
        this.sex = sex;
        if (typeof this.say != "function") {
            Person.prototype.say = function () {
                alert(this.name);
            }
        }
    }
    var man =new Person ("凯撒", "男");
    man.say();//凯撒

![复制代码][copycode.gif]

**动态原型模式是将所有的信息都封装到构造函数中，构造函数中，只用say不存在的情况下，才会将它添加到原型中**。这段代码只有在初次调用时才会执行。

**　实例化obj对象有三步：**

1. 创建obj对象：obj=new Object();

2. 将obj的内部\_\_proto\_\_指向构造他的函数Obj的prototype，同时，obj.constructor===Obj.prototype.constructor，从而使得obj.constructor.prototype指向Obj.prototype（obj.constructor.prototype===A.prototype）。obj.constructor.prototype与的内部\_proto\_是两码事，实例化对象时用的是\_proto\_，obj是没有prototype属性的，但是有内部的\_\_proto\_\_，通过\_\_proto\_\_来取得原型链上的原型属性和原型方法。

3. 将obj作为this去调用构造函数Obj，从而设置成员（即对象属性和对象方法）并初始化。

当这3步完成，这个obj对象就与构造函数Obj再无联系，这个时候即使构造函数Obj再加任何成员，都不再影响已经实例化的obj对象了。

转载于:https://www.cnblogs.com/manshufeier/p/9407682.html

[copycode.gif]: /images/20210725/fdd45fc245484858b584962d858540fc.png