ECMAScript-8 【对象-构造函数-实例化】

一、对象

(1)创建对象的方法

  1. 对象字面量创建: 声明一个变量,将对象赋给变量这种方式叫对象字面量
  2. 构造函数创建: 这里的构造函数分为系统自带的构造函数自定义构造函数
// 字面量创建对象
var obj = {
    name: '张三',
    sex: 'male'
}
// 内置构造函数创建对象
var obj = new Object();

(2)对象的写法

  1. 对象里面的属性以键值对的方式来书写
  2. 对象里面的函数叫方法
 var teacher = {
     name: '张三',
     age: 32,
     sex: 'male',
     height: 176,
     weight: 130,
     teach: function () {
         console.log('I am taching JavaScript');
     },
     smoke: function () {
         console.log('I am smoking');
     },
     eat: function () {
         console.log('I am having a dinner');
     }
 }

(3)对象的增删改查

console.log(teacher.teach);  // 查询属性
teacher.teach();             // 调用方法
teacher.address = '北京';    // 增加属性
teacher.height = 180;        // 修改(重新赋值)
delete teacher.address;      // 删除(delete是对象删除功能的一个关键字)

(4)案例

// 1.每抽一根烟长一斤,每吃一口饭减一斤
var teacher = {
    name: '张三',
    age: 32,
    sex: 'male',
    height: 176,
    weight: 130,
    teach: function () {
        console.log('I am taching JavaScript');
    },
    smoke: function () {
        this.weight--;	//this相当于teacher,在对象里面this代表对象本身
        console.log(this.weight);
    },
    eat: function () {
        this.weight++;
        console.log(this.weight);
    }
}
// 2.学生会议出席名单
// 方法一
var attendance = {
    students: [],
    join: function (name) {
        this.students.push(name)
    },
    leave: function (name) {
        for (var i = 0; i < this.students.length; i++) {
            if (this.students[i] === name) {
                this.students.splice(i, 1)
            }
        }
    }
}
attendance.join('小管')
attendance.join('小白')
attendance.leave('小白')
console.log(attendance.students);

// 方法二
var attendance = {
    students: [],
    total: 6,
    join: function (name) {
        this.students.push(name)
        if (this.students.length >= this.total) {
            console.log(name + '到课,学生已到齐');
        } else {
            console.log(name + '到课,学生未到齐');
        }
    },
    leave: function (name) {
        if (this.students.indexOf(name) !== -1) {
            this.students.splice(this.students.indexOf(name), 1)
        }
        console.log(name + '早退');
    },
    classOver: function () {
        this.students = [];
        console.log('已下课');
    }
}
attendance.join('张三')
attendance.join('李四')
attendance.join('王五')
attendance.join('周六')
attendance.join('吴七')
attendance.join('赵八')
attendance.leave('吴七')
attendance.classOver()
console.log(attendance.students);

二、构造函数

(1)系统自带的构造函数

通过new Object()实例化出来一个对象

var obj = new Object(); //等同对象字面量(new可以实例化一个对象)
obj.name = '张三';
obj.sex = '男生';
console.log(obj);

问题:

  1. 对象和构造函数的区别:
    对象是通过实例化构造函数而得出的对象实例。
  2. 自带的构造函数实例化出来的一个对象(new object())和对象字面量创建的对象有什么区别?
    没有任何区别,完全相等(系统的用的不多)

(2)自定义构造函数

命名方式: 大驼峰(为了区分普通函数)

function Teacher() {
    this.name = '张三';
    this.sex = '男士';
    this.smoke = function () {
        console.log('I am smoking');
    }
}
var teacher = new Teacher();

问题:

  1. this指向的是谁?
    没有实例化之前是指向的window,实例化了之后指向实例化对象

三、实例化

(1)实例化同一个构造函数

// 示例1
function Teacher() {
    this.name = '张三';
    this.sex = '男士';
    this.smoke = function () {
        console.log('I am smoking');
    }
}
var teacher1 = new Teacher();
var teacher2 = new Teacher();
teacher1.name = '李四'
console.log(teacher1, teacher2);
// teacher1:Teacher { name: "李四", sex: "男士", smoke: ƒ }
// teacher2:Teacher { name: "张三", sex: "男士", smoke: ƒ }
// 构造函数实例化出来的多个对象相互之间是不影响的

// 示例2
function Teacher() {
    this.name = '张三';
    this.sex = '男士';
    this.weight = 130;
    this.smoke = function () {
        this.weight--;
        console.log(this.weight);
    }
    this.eat = function () {
        this.weight++;
        console.log(this.weight);
    }
}
var t1 = new Teacher();
var t2 = new Teacher();
t1.smoke();  // 129
t1.smoke();  // 128
console.log(t2.weight);  // 130
// 再次印证构造函数实例化出来的多个对象相互之间是不影响的

构造函数实例化出来的多个对象相互之间是不影响的(除了原形)

(2)传统传参


function Teacher(name, sex, weight, course) {
    this.name = name;
    this.sex = sex;
    this.weight = weight;
    this.course = course;
    this.smoke = function () {
        this.weight--;
        console.log(this.weight);
    }
    this.eat = function () {
        this.weight++;
        console.log(this.weight);
    }
}
var t1 = new Teacher('张三', '男', '145', 'JavaScript');
var t2 = new Teacher('李四', '女', '90', 'HTML')

(3)对象传参

// var opt = {
//     name:123,
//     sex:123
// }
function Teacher(opt) { // option选项、设置项,它相当于一个对象
    this.name = opt.name;	 // opt对象的名字	
    this.sex = opt.sex;  // opt对象的性别
    this.weight = opt.weight;  // opt对象的体重
    this.course = opt.course;  // opt对象的课程
    this.smoke = function () {
        this.weight--;
        console.log(this.weight);
    }
    this.eat = function () {
        this.weight++;
        console.log(this.weight);
    }
}
var t1 = new Teacher({
    name: '张三',
    sex: '男',
    weight: 145,
    course: 'JavaScript'
});
var t2 = new Teacher({
    name: '李四',
    sex: '女',
    weight: 90,
    course: 'HTML'
});
// 这样写就好配置好维护,就是知道每个参数对应的属性是什么 

四、作业

1.写一个构造函数,接收数字类型的参数,参数数量不定,完成参数相加和相乘的功能

// 方法1
function Compute() {
    var args = arguments,
        res;
    this.plus = function () {
        res = 0;
        for (var i = 0; i < args.length; i++) {
            res += args[i]
        }
        console.log(res);
    }
    this.times = function () {
        res = 1;
        for (var i = 0; i < args.length; i++) {
            res *= args[i]
        }
        console.log(res);
    }
}

var compute = new Compute(2, 4, 6, 8);
compute.plus()
compute.times()

// 方法2
function Compute() {
    var args = arguments,
        res;
    this.plus = function () {
        res = 0;
        loop('plus', res);
    }
    this.times = function () {
        res = 1;
        loop('times', res);
    }
    function loop(method, res) {
        for (var i = 0; i < args.length; i++) {
            var item = args[i]
            if (method === 'plus') {
                res += item;
            } else if (method === 'times') {
                res *= item;
            }
        }
        console.log(res);
    }
}
var compute = new Compute(2, 4, 6, 8);
compute.plus()
compute.times()

// 方法3
function Compute() {
    var res = 0;
    this.plus = function () {
        loop('plus', arguments, res)
    }
    this.times = function () {
        res = 1;
        loop('times', arguments, res)
    }
    function loop(method, args, res) {
        for (var i = 0; i < args.length; i++) {
            var item = args[i]
            if (method === 'plus') {
                res += item;
            } else if (method === 'times') {
                res *= item;
            }
        }
        console.log(res);
    }
}
var compute = new Compute();
compute.plus(1, 2, 3, 4)
compute.times(1, 2, 3, 4)

2.写一个构造车的函数,课设置车的品牌,颜色,排量,在写一个构造消费者的函数,设置用户的名字,年龄,收入,通过选择的方法实例化改用户喜欢的车,再设置车的属性。

function Car(opt) {
    this.brand = opt.brand;
    this.color = opt.color;
    this.displacement = opt.displacement;
}

function Person(opt) {
    this.name = opt.name;
    this.age = opt.age;
    this.income = opt.income;
    this.selectCar = function () {
        var myCar = new Car(opt.carOpt)
        console.log(this.name + '挑选了一辆排量' + myCar.displacement + '的' + myCar.brand);
    }
}

var john = new Person({
    name: 'john',
    age: 28,
    income: '20k',
    carOpt: {
        brand: 'Benz',
        color: '红色',
        displacement: '2.0'
    }
})

john.selectCar()
上一篇:JAVA前端进阶(二):ES6


下一篇:自主学习报告--JavaScript