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

本文主要是介绍ECMAScript-8 【对象-构造函数-实例化】，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、对象

（1）创建对象的方法

对象字面量创建： 声明一个变量，将对象赋给变量这种方式叫对象字面量
构造函数创建： 这里的构造函数分为系统自带的构造函数和自定义构造函数

// 字面量创建对象
var obj = {
    name: '张三',
    sex: 'male'
}
// 内置构造函数创建对象
var obj = new Object();

（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);

问题：

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

（2）自定义构造函数

命名方式： 大驼峰（为了区分普通函数）

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

问题：

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()

这篇关于ECMAScript-8 【对象-构造函数-实例化】的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

C/C++教程

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

一、对象

（1）创建对象的方法

（2）对象的写法

（3）对象的增删改查

（4）案例

二、构造函数

（1）系统自带的构造函数

（2）自定义构造函数

三、实例化

（1）实例化同一个构造函数

（2）传统传参

（3）对象传参

四、作业

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯