JavaScript-高级-创建对象

ECMAScript 有两种开发模式
一种是面向过程，一种是面向对象。
面向过程：

 <button type="button" onclick="javascript:console.log('1');console.log('2');">按钮</button>

面向对象 ：

 <button type="button" onclick="fn1()">按钮</button>
    
    <script>
        function fn1(){
            console.log('1');
            console.log('2');
        }
    </script>

一、创建对象的几种方法

第一种方法：使用对象字面

，这是创建对象简洁明了的一种方法，可以在一条语句中定义和创建对象

用{}即可

var person = {name:'Nanchen', age:12,sex:'男', color:'gray'};
    console.log(person);

效果如图：

 对象也可以横跨多行去书写，效果是一样的

 var person = {
            name: 'Nanchen',
            age: 12, sex: '男',
            color: 'gray'
        };

第二种方法：使用JavaScript关键字new

效果和第一种方法一致

var person = new Object();
        person.name = 'Nanchen';
        person.age = 13;
        person.sex = '男';
        person.color = 'gray';
        console.log(person);

第三种方法：工厂方法创建对象

这种就属于用构造函数创建对象

 function createObject(name, age,sex,color) {
				var box = new Object();
				box.name = name;
				box.age = age;
                box.sex = sex;
                box.color = color;
				box.run = function() {
					// console.log(this);
					return 'ID:'+this.name+' 年龄：'+this.age+' 性别'+this.sex+' 喜欢的颜色'+this.color;
				}
				return box; //很重要
			}
            var a = createObject('Nanchen',18,'男','gray')
                console.log(a);
                console.log(a.run());

 

构造函数和普通函数的唯一区别，就是他们调用的方式不同。 构造函数也是函数，必须用new运算符来调用，否则是无法创建对象的  

探讨构造函数内部的方法(或函数)的问题，首先看下两个实例化后的对象的属性和方法是否相等。

var box1 = new Box('Lee', 100);			//传递一致
var box2 = new Box('Lee', 100);			//同上

alert(box1.name == box2.name);			//true，属性的值相等
alert(box1.run == box2.run);			//false，方法其实也是一种引用地址
alert(box1.run() == box2.run());		//true，方法的值相等，因为传参一致

可以把构造函数里的方法(或函数)用new Function()方法来代替，得到一样的效果，更加证明，他们最终判断的是引用地址，唯一性。  

function Box(name, age) {				//new Function()唯一性
    this.name = name;
    this.age = age;
    this.run = new Function("return this.name + this.age + '运行中...'");
}

我们可以通过构造函数外面绑定同一个函数的方法来保证引用地址的一致性。

如下：

function Box(name,age,sex,color){
            this.name = name;
            this.age = age;
            this.sex = sex;
            this.color = color;
            this.run = boxMethod;
        }
        function boxMethod(){
            console.log(this);
            return 'ID:'+this.name+' 年龄：'+this.age+' 性别'+this.sex+' 喜欢的颜色'+this.color;
        }
        console.log(boxMethod());

使用了全局的函数run()来解决了保证引用地址一致的问题。但需要注意的是，全局函数run中的this，在对象调用的时候是Box本身，而当作普通函数调用的时候，this又代表window。  

function Box(name, age) {
    this.name = name;
    this.age = age;
    this.run = run;
}

function run() {					  //通过外面调用，保证引用地址一致
    console.log(this);
    return this.name + this.age + '运行中...';
}

var box1 = new Box('Lee', 100);	
box1.run();                           //run函数中打印Box对象
run();                                //run函数中打印Window对象

JavaScript对象属性 

 属性是JS对象最重要的部分。属性也可以被修改、添加和删除，但是也有一些特殊属性是只读的。

访问 JavaScript 属性

访问js属性有两种方法可以使用.property 或 ["property"]

    <p></p>
    <script>
        var person = {
            name:'Nanchen',
            age:13,
            sex:'男',
            color:'gray',
            run : function(){
                console.log('你好吗？');
                return person;
            }
        }
        var p = document.querySelector('p');
        p.innerHTML = 'ID:'+person.name+' 年龄：'+person.age+' 性别'+person.sex+' 喜欢的颜色'+person.color;
        //p.innerHTML = 'ID:'+person['name']+' 年龄：'+person['age']+' 性别'+person['sex']+' 喜欢的颜色'+person['color'];//效果一致
        console.log(person.run()); 
    </script>

修改属性：直接更换即可,例如：

person.age = 18;

添加新属性 

假设 person 对象已存在 - 那么您可以为其添加新属性：

person.curriculum= "English";

删除属性

delete 从对象中删除属性： 

delete person.curriculum;