对象字面量、构造函数和实例化

对象字面量,对象直接量

// 创建对象-对象字面量,对象直接量 - 对象增删改查
var teacher = {
    // 属性
    name: '张三',
    age: 22,
    // 方法
    teach: function() {
        console.log('I am teaching JS');
    },
    smoke: function() {
        console.log('I am smoking');
    }
}
// 访问对象
// 打印属性
console.log(teacher.name); // 张三
// 打印方法
console.log(teacher.teach); // ƒ () {...}
// 执行方法
teacher.teach(); // I am teaching JS
// 增加属性
teacher.address = '北京';
console.log(teacher.address); // 北京
// 增加方法
teacher.drink = function() {
    console.log('I am drinking beer');
}
teacher.drink(); // I am drinking beer
// 改属性
teacher.age = 25;
console.log(teacher.age); // 25
// 改方法
teacher.teach = function() {
    console.log('I am teaching HTML');
}
teacher.teach(); // I am teaching HTML
// 删除属性
delete teacher.address;
console.log(teacher.address); // 'undefined'
// 带有括号不能被删除,为执行方法
delete teacher.teach(); // I am teaching HTML
// 删除方法(不带方法可以删除)
delete teacher.teach;
console.log(teacher); // {name: "张三", age: 25, smoke: ƒ, drink: ƒ}

构造函数

// 系统自带的构造函数
var obj = new Object(); //等于对象字面量
obj.name = '张三';
obj.age = 25;
console.log(obj); // {name: "张三", age: 25}


// 自定义构造函数
// 与普通函数区别:1、函数名大驼峰命名;2、定义属性和方法为纯语句
function Teacher(name, sex) { // 传入参数-单个属性
    // 当没有经过关键字new构造函数,就还没有实例化,此时this不存在
    this.name = name;
    this.sex = sex;
    this.age = 25; // 默认属性
    this.smoke = function() {
        console.log('I am smoking');
    }
}

// (1)对象实例化过程:用关键字new生成一个对象,产生this,指向对象本身
// (2)实例化出来的是两个不同的新对象,相互之间互不影响
var teacher1 = new Teacher('张三', '男');
var teacher2 = new Teacher('李四', '女');
teacher1.age = 30;
console.log(teacher1); // Teacher {name: "张三", sex: "男", age: 30, smoke: ƒ}
console.log(teacher2); // Teacher {name: "李四", sex: "女", age: 25, smoke: ƒ}


// 构造函数优化
function Teacher(opt) { // 传入参数-对象
    this.name = opt.name;
    this.sex = opt.sex;
    this.age = 25; // 默认属性
    this.smoke = function() {
        console.log('I am smoking');
    }
}

var teacher1 = new Teacher({
    name: '张三',
    sex: '男'
});
var teacher2 = new Teacher({
    name: '李四',
    sex: '女'
});
console.log(teacher1); // Teacher {name: "张三", sex: "男", age: 25, smoke: ƒ}
console.log(teacher2); // Teacher {name: "李四", sex: "女", age: 25, smoke: ƒ}

构造函数中的this原理

// this只有被执行才会生成
// 没有实例化执行指向window,一旦被实例化之后,this就指向实例化之后的对象
function Car() {
    this.color = 'red';
}
// 没有实例化,直接执行
Car(); // this == window
// 实例化构造函数
var car1 = new Car(); // this == car1
var car2 = new Car(); // this == car2

构造函数与实例化原理

(1)构造函数内部原理

  • 1、在函数体最前面隐式的加上this = {};
  • 2、执行 this.xxx = xxx;
  • 3、隐式的返回this

(2)实例化原理
new关键字实例化对象,改变this指向,由window到实例化出的对象本身

(3)代码示例

function Car(color, brand) {
    // var this = {
    //     color: color,
    //     brand: brand
    // }
    this.color = color;
    this.brand = brand;

    // 隐式返回
    // return this;

    // 可以显示返回引用值: {},[],function
    // var obj = {
    //     color: 'red'
    // }
    // return obj;

    // 返回原始值无效
    // return '123';
}
// 实例化构造函数: new 作用就是造出this
var car1 = new Car('red', 'Benz');
console.log(car1.color);

//AO与GO
GO = {
    Car: (function),
    // 实例化对象赋值给变量car1: var car1 = new Car('red', 'Benz');
    car1: undefined >
        {
            color: color,
            brand: brand
        }
}
// 执行实例化:new Car('red', 'Benz');
AO = {
    this: {
        color: color,
        brand: brand
    }
}