JavaScript对象精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/Problem_Girl/article/details/103619471

对象

什么是对象

现实生活中：万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征

例如：一部车、一个手机

车是一类事物，门口停的那辆车才是对象。那么车的特征有：红色、四个轮子；行为有：驾驶、刹车

JavaScript中的对象

JavaScript中的对象其实就是生活中对象的一个抽象
JavaScript中的对象在属性方面是无序的集合，其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值，我们可以把JavaScript中的对象想象成键值对，其中值可以是数据和函数
对象都具有行为和特征
特征------名词，用来描述这个对象的，可以看作是属性，如person的name属性（特征）
行为------动词，可以看作是方法

为什么要有对象？

因为对象可以抽象化一类的事物，方便使用，简化代码

function printPerson(name, age, sex, salary){

}    //没有对象时这样来书写很繁琐及其不方便

//有对象后，我们可以通过调用即可解决

function printPerson(person){
    console.log(person.name);
}

程序中的对象

var student = {
    name: 'Eillen',
    age: '17',            //对象是用花括号括起来的，里面是属性和值，即键值对模式，还可以包含方法
    sex: '女',
    sayHi: function(){
        console.log('Hello');
    }

}

函数和对象有什么区别？

函数----可以封装一段代码
对象-----可以封装一组属性和方法

函数和方法有什么区别？

函数----独立存在的函数。函数的调用 fn（）；
方法-----属于对象的函数。方法的调用 dog.bar( ) ;

如何创建对象和使用对象成员

对象：拥有属性和方法，这些属性和方法也叫成员

如创建狗对象：属性有name、type、age、color 方法有：bark（叫）、eat
var dog = {
    name: '大黄',
    type: '二哈',
    age: 2,
    color: 'yellow',

    bark: function () {
        //在方法中如何使用属性的值
        console.log(this.name + '汪汪汪')；    //this在方法中代表的是当前对象dog
    }，    
    eat: function () {
        console.log(this.name + '啃骨头')；
    }

}
 
//如何访问属性    对象.属性名
console.log(dog.name);
//如何访问方法    对象.方法名
dog.bark();
如何访问属性

一种方法为：对象.属性名另一种方法为： dog [ 'name' ]; （类似数组，只是中括号里面要用单引号把属性括起来）

如何访问方法对象.方法名

对象的创建方式

对象字面量创建

var hero = {
    name: '黄忠'，
    weapon：'弓箭',
    equipment: ['头盔', '靴子', '盔甲'],
    blood: 100,
    attack: function () {
        console.log(this.name + '射箭');
    },
    run: function () {
        console.log(this.name + '加速跑');
    }
}
console.log(hero.name);
console.log(hero.equipment);

hero.attack();
hero.run();

new Object()创建对象

Object（）是一个构造函数
new关键字要搭配Object来使用，以调用构造函数

new Object（）调用构造函数，会在内存中创建一个对象

var hero = new Object();    //指创建了一个空的对象
//若要打印一个不存在的属性如 hero.name ,则会输出undefined

    hero.name = '黄忠'，
    hero.weapo = '弓箭',
    hero.equipment = ['头盔', '靴子', '盔甲'],
    hero.blood = 100,
    hero.attack = function () {
        console.log(this.name + '射箭');
    },
    hero.run = function () {
        console.log(this.name + '加速跑');
    }

工厂方法创建

需要有返回值return

function creatHero(name, weapo, equipment, blood){

var hero = new Object();    //返回一个空的对象
    
    //属性
    hero.name = name，
    hero.weapo = weapo,
    hero.equipment = equipment,
    hero.blood = blood,
    hero.attack = function () {
        console.log(this.name + '射箭');
    },
    hero.run = function () {
        console.log(this.name + '加速跑');
    }
    return hreo；
}

var hero1 = creatHero('黄忠', '弓箭', ['头盔', '靴子'], 100);
var hero1 = creatHero('周瑜', '剑', ['头盔', '盔甲'], 100);

自定义构造函数

new Object（）；

new Hreo（）；

都遵循帕斯卡命名：即第一个单词的第一个字母大写，后续的每一个单词的首字母都大写，而一般函数是遵循驼峰原则。这也就是看函数名区分自定义函数的关键。


function Hero(name, weapo, equipment, blood){
    //this动态的给对象增加成员
    //this指向了当前对象
    
    //属性
    this.name = name，
    this.weapo = weapo,
    this.equipment = equipment,
    this.blood = blood,
    this.attack = function () {
        console.log(this.name + '射箭');
    },
    hero.run = function () {
        console.log(this.name + '加速跑');
    }
}

构造函数中new的执行过程

在内存中创建了一个空的对象
让构造函数中的this指向刚刚创建的对象
执行构造函数，在构造函数中设置属性和方法（当然也可以做其他事情）
返回了当前对象

this关键字

this一般会出现在以下位置

函数中 ----- this指向window
方法中 -----this指向的是这个方法所属的对象
构造函数中 -------this就是构造函数创建的对象

//函数
function student() {
    console.log(this);    //返回的是window，说明函数中的this指向window
}
student();

//对象   方法属于对象，eat（）方法属于student对象
var student = {
    name: 'Eileen',
    eat: function () {
        console.log(this.name);    //this指向的是这个eat（）方法所属的对象student
    }
};
student.eat();

//构造函数
function Stu() {
    this.name = 'Eileen',
    this.age = 17,
    console.log(this);    //指向的是构造函数创建的对象my
}
var my = new Stu();

for in 的使用

可以遍历对象的成员，当不清楚对象的键值对时，可通过for in来查看对象的属性和方法

for (var key in student) {    //括号的表达式指key为student里面所有的属性方法
    console.log(key + '---' + student[ key ]);
}

删除属性

delete student.name;