JavaScript中创建对象常见的三种形式

JavaScript中创建对象常见的三种形式

1、Object 形式

对象的定义：

​ let 变量名 = new Object(); // 对象实例（空对象）

​ 变量名.属性名 = 值; // 定义一个属性

变量名.函数名 = function() {} // 定义一个函数

对象的访问：

​ 变量名.属性 / 函数名();

示例代码：

<script type="text/javascript">
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
let obj = new Object();
obj.name = "华仔";
obj.age = 18;
obj.fun = function () {
    alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );    obj.fun();
</script>

2、{}花括号形式

对象的定义：

let 变量名 = { // 空对象

属性名：值, // 定义一个属性

属性名：值, // 定义一个属性

函数名：function(){} // 定义一个函数

}

对象的访问：

​ 变量名.属性 / 函数名()

示例代码：

<script type="text/javascript">
    // 对象的定义：
    // var 变量名 = { // 空对象
    // 属性名：值, // 定义一个属性
    // 属性名：值, // 定义一个属性
    // 函数名：function(){} // 定义一个函数
    // };
    let obj = {
        name:"国哥",
        age:18,
        fun : function () {
            alert("姓名：" + this.name + " , 年龄：" + this.age);
        }
    };
	// 对象的访问：
	// 变量名.属性 / 函数名();
    alert(obj.name);
    obj.fun();
</script>

3、函数对象，构造函数形式

组合使用构造函数形式和原型形式

创建自定义类型最常见的方式就是组合使用构造函数模式与原型模式。构造函数模式用于定义实例属性，原型模式用于定义方法和共享的属性。结果，每个实例都会有自己的一份实例属性的副本，但同时又共享着对方法的引用，最大限度的节省了内存。另外，这种混成模式还支持向构造函数传递参数；

原型对象类似Java静态修改原型对象属性值所有实例对象都会被影响

示例代码：

function Person(name, age){

    this.name = name;

    this.age = age;

    this.friends = ["乾隆","康熙"];

}

Person.prototype = {

	constructor:Person,

    sayName:function(){

        alert(this.name);

    }

}

let person1 = new Person("wei",29);

let person2 = new Person("bu",25);

person1.friends.push("嬴政");

console.log(person1.friends); //["乾隆", "康熙", "嬴政"]

console.log(person2.friends); //["乾隆", "康熙"]

console.log(person1.friends === person2.friends); //false

console.log(person1.sayName === person2.sayName); //true

继承代码示例：

function Person(nation, skinColor) {
    this.nation = nation;
    this.skinColor = skinColor;
}
Person.prototype.getNation = function () { return this.nation; }
Person.prototype.getSKinColor = function () { return this.skinColor; }

function Woman(nation, skinColor) {
    Person.call(this, nation, skinColor);
    this.sex = "女";
}
//在通过原型来实现继承时，原型对象实际上会变成另一个类型的实例，原先的实例属性也就变成现在的原型属性了;
//包含引用类型值的原型属性会被所有实例共享;解决方法借用构造函数 call() 继承属性
Woman.prototype = new Person();
let woman1 = new Woman("汉族", "黄色");

参考: JavaScript中创建对象的7种模式

帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）