html实例化用那个函数,对象字面量、构造函数和实例化

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

对象字面量，对象直接量// 创建对象-对象字面量，对象直接量 - 对象增删改查

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

}

}