ECMAScript的核心语言 （二）对象 Object

js-笔记

对象 Object： 一切皆对象

概念：

对象是一种数据类型

对象是描述一个具体的事物

对象可以看做属性的无序集合

对象的组成： 属性、方法

对象的书写方式： json格式

1、属性名

引号可以省略

以 关键字 或 - 来命名不能省略引号，如：'if'、'skill-2'；不推荐使用关键字

2、分隔符

,逗号隔开

最后一个值不需要用逗号

3、属性值： 数字类型不需要引号

例子：

var obj = {
    name:'www',
    'if':10,
    'skill-2':'css'
}
console.log(obj.name);          // 返回 www
console.log(obj.if);            // 返回 10，但是不推荐使用关键字
// console.log(obj.skill-2);    // 返回 NaN   ，不能查询结果
console.log(obj['skill-2']);    // 返回 css

对象的分类：

1、 内置对象： 数组、函数、日期、正则 等....

2、 宿主对象：

针对于前端来说，JS运行在浏览器上，浏览器就是JS的宿主

htmlElement(元素) comment(注释) text(文本) attribute（属性）

3、 自定义对象

对象的声明(创建)：

1、 使用对象直接量创建：

1. 创建一个空对象
    var obj1 = {};
2. 创建一个对象，并赋值
    var obj2 = {
        name:'www',
        age:18,
        sex:'女'
    }
3. 包含 数组、属性、方法 的对象
    var obj3 = {
        user:['html','css','js'],
        type:'post',
        test:function(){
            console.log('我是一个方法')
        }
    }

2、 使用构造函数创建：

构造函数的名字： Object Array Number String ......

var obj4 = new Object();  // 创建空的对象

3、 使用Object.create() ： ES5的新方法

需要传入原型

1、 只有一个参数，不继承构造函数的方法和属性

function User(){
    this.name = 'www';
    this.age = 12;
}
var obj = Object.create(User.prototype);
console.log(obj);        // 返回 User {}
console.log(obj.name);   // 返回 undefined

2、 两个参数，参数二传入对象描述

function Info(){}
var obj3 = Object.create(Info.prototype, {
    name:{
        value:'www'
    }
})
console.log(obj3);          // 返回 Info {name: "www"}
console.log(obj3.name);     // 返回 www

对象属性 访问、修改、添加： 使用.运算符 或者 []

1、 添加对象属性

var obj = {}
obj.name = 'www';     // 使用. 添加属性
// obj['name'] = 'www';  // 使用[] 添加属性
// 添加方法
obj.test = function(){
    console.log('I can play');
}
console.log(obj);  // 返回 {name: "www", test: function(){}}

2、 修改对象属性

var obj = {}
obj.name = 'abc';;
obj.test = function(){
    console.log('I can look A movie');
}
console.log(obj);  // 返回 {name: "abc", test: function(){}}

3、 访问对象属性

var obj = {
    name: "abc",
    test: function(){
        console.log('I can look A movie');
    }
}
console.log(obj.name);       // 返回 abc
console.log(obj['name']);    // 返回 abc
obj.test();                  // 返回 I can look A movie

4、 . 和 [] 的区别：

var obj = {
    age:99
}
var a = 'age';
console.log(obj.a);     // 返回 undefined，属性里面没有a属性
console.log(obj[a]);    // 返回 99，使用[]可以访问

对象属性 删除： 使用delete

var obj = {
    name:'www',
    age:18
}
delete obj.age;      // 删除属性名为age的属性
console.log(obj);    // 返回 {name: "www"}

对象属性检测：

建议使用 in

1、 使用关键字 in ： 返回 true | false，建议使用

var obj = {
    name:'www',
    age:18
}
console.log('name' in obj);    // 返回 true
console.log('skill' in obj);   // 返回 false

2、 使用 === undefined 判断： 存在局限性

var obj = {
    name:'www',
    age:18
}
console.log(obj.skill);    // 返回 undefined
if(obj.skill === undefined){
    console.log("不存在")
}else{
    console.log("存在")
}

3、 特殊:存在skill属性，但其属性值为undefined，此时不能使用 === undefined来判断，要使用in来判断

var obj = {
    name:'www',
    age:18,
    skill:undefined
}
console.log(obj.skill);         // 返回 undefined
console.log('skill' in obj);    // 返回 true

对象的遍历：

1、 for in遍历

var info = {
    name:'www',
    age:18,
    skill:'css'
}
for(var i in info){
    console.log(i + ':' + info[i]);     // 返回 name:www age:18 skill:css
}

2、 Object.keys(obj) ，ECMA5提供的新方法

var info = {
    name:'www',
    age:18,
    skill:'css'
}
var arr = Object.keys(info);   // 将对象的属性名 方法名 放到一个数组中
console.log(arr);     // 返回 ["name", "age", "skill"]
arr.reverse();        // 验证能不能使用数组的方法
console.log(arr);     // 返回 ["skill", "age", "name"] ，通过翻转证明了这是一个数组
for(var j = 0; j < arr.length; j++){
    console.log( arr[j] + ':' + info[arr[j]]);  // 返回 skill:css age:18 name:www
}

对象中的this：

1、 当前对象

var obj = {
    name:'www',
    age:18,
    say:function(){
        console.log(this.name + '今年' + this.age + '岁了');  // 
    }
}
obj.say()  // 返回 www今年18岁了，this是本对象

2、 全局对象window

-- 作用域的顶端

-- 使用return之后，将当前对象变成全局对象

var name  = 'abc';
var obj = {
    name:'www',
    age:18,
    say:function(){
        return function(){
            console.log(this.name);
        }
    }
}
// obj.say()   // 返回 函数 function(){ console.log(this.name); }
obj.say()();   // 返回 abc

3、 改变this的指向

var name  = 'abc';
var obj = {
    name:'www',
    age:18,
    say:function(){
        var that = this;        // this代表obj
        return function(){
            console.log(that.username);
        }
    }
}
obj.say()();    // 返回 www

对象的引用比较：

1、 原始类型的数据比较：只是值的比较

console.log(100 == 100);              // 返回 true
console.log('abc' == 'abc');          // 返回 true
console.log([1,2,3] == [1,2,3]);      // 返回 false

2、 对象类型的数据比较：要求值和引用的地址都相等

function info(name,age){
    this.name=name;
    this.age=age;
    this.test = function(){
        console.log('ceshi');
    }
}
var people1 = new info('www',18);
console.log(people1);       // 返回 {name: "www", age: 18}
var people2 = new info('abc',12);
console.log(people2);       // 返回 {name: "abc", age: 12}
console.log(people1.drink == people2.drink);  // 返回 false，引用的地址不同

构造函数的特点：

1、 用来新建同时初始化一个新对象

var arr = new Array();

2、 一个构造函数可以有多个对象

var arr1 = new Array();
var arr2 = new Array();
var arr3 = new Array();

3、 每个对象都有与之对应的构造函数，如：

1. 直接创建字符串 
    var str = 'abc';
2. 通过构造函数创建字符串
    var str1 = new String('abc');
    console.log(str1);     // 返回 String {0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"}
3. str 和 str1 使用的时候结果是一样的
    console.log(str == str1);     // 返回 true
    console.log(str === str1);    // 返回 false

判断自有属性 obj.hasOwnProperty('属性名') ： true | false

var list = document.getElementsByTagName('li');
for(var i in list){
    if(list.hasOwnProperty(i)){
        console.log(list[i]);
    }
}

作者 wendy
2019 年 5月 23日