javascript定义对象的几种方法 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> javascript定义对象的几种方法

javascript定义对象的几种方法

浏览:1272次出处信息

本文总结javascript中定义对象的几种方式：

1、基于已有对象扩充其对象和方法(只适用于临时的生成一个对象)

var obj = new Object();
obj.name = 'userObject';
obj.printName = function(name) {
    this.name = name; // 将属性name赋值为参数name
    alert(this.name);
}
obj.printName("newUserObject");

2、工厂方式创建对象

每次创建一个object以后，其中对应的方法也被创建一次，方法不能被创建的所有对象共享。

(1)不带参数的构造方法

function createObject() {
    var obj = new Object();
    obj.name = 'userObject';
    obj.password = '123456';
    obj.get = function() {
        alert(this.name + ',' + this.password);
    };
    return obj; // 记得加上这句，返回一个对象
}
var obj1 = createObject();
var obj2 = createObject();
obj1.get();
obj2.get();

(2)带参数的构造方法

function createObject(userName, password) {
    var obj = new Object();
    obj.userName = userName;
    obj.password = password;
    obj.get = function() {
        alert(this.userName + ',' + this.password);
    };
    return obj;
}
 
var obj1 = createObject('yedward', '123456');
obj1.get();

(3)让函数被多个对象共享

function get() {
    alert(this.userName + ',' + this.password);
}
 
function createObject(userName, password) {
    var obj = new Object();
    obj.userName = userName;
    obj.password = password;
    obj.get = get; // 将外面定义的方法赋进来
    return obj;
}
 
var obj1 = createObject('yedward','123445');
var obj2 = createObject('yedyed','23424');
 
obj1.get();
obj2.get();

3、构造函数方式

(1)无参构造函数

function Person() {
    this.userName = 'yedward';
    this.password = '124234';
    this.get = function() {
        alert(this.userName + ',' + this.password);
    };
}
 
var person = new Person();
person.get();

(2)有参数构造函数

function Person(userName, password) {
    this.userName = userName;
    this.password = password;
    this.get = function() {
        alert(this.userName + ',' + this.password);
    };
}
 
var person = new Person('yedward','111111');
person.get();

4、使用原型(prototype)方式

代码1：

function Person() {
    Person.prototype.userName = 'yedward';
    Person.prototype.password = '123456';
    Person.prototype.get = function() {
        alert(this.userName + ',' + this.password);
    };
}
 
var person1 = new Person();
var person2 = new Person();
 
//person1.userName = 'xiaoye';
Person.prototype.userName = 'xiaoye';
person1.get();
person2.get();

代码2：

function Person() {
    Person.prototype.userName = new Array();
    Person.prototype.password = '123456';
    Person.prototype.get = function() {
        alert(this.userName + ',' + this.password);
    };
};
 
var person1 = new Person();
var person2 = new Person();
// 共享对象中的属性，一个对象属性的改变也会反应到其他的对象上。
person1.userName.push('zhangsan');
person1.userName.push('lisi');
// 但是运行结果可以发现，password的改变并没有反应到其他对象上！
person1.password = '67889';
person1.get();
 
person2.get();

5、动态原型方式

在构造函数中通过标志量让所有对象共享一个方法，而每个对象拥有自己的属性。

function Person() {
    this.userName = 'yedward';
    this.password = '1234535';
    if (typeof Person.flag == 'undefined') {
        // 往原型上添加get方法，并且只添加了一次！
        Person.prototype.get = function() {
            alert(this.userName + ',' + this.password);
        }
        Person.flag = true;
    }
};
 
var person1 = new Person();
var person2 = new Person();
person1.get();
person2.get();

以上方法均可使用，具体使用哪个视情况而定！

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：JavaScript初体验

后一篇：js代码因逗号不规范导致IE不兼容的问题 >>

文章信息

作者：叶德华的博客来源：叶德华的博客
标签：对象
发布时间：2016-02-11 16:23:48

建议继续学习

近3天十大热文