第七节:JavaScript对象认识

一.Object 对象

1. 什么是对象

对象是由一对或者多对属性(包含属性名和属性值)组成的集合,属性名也叫做键名,属性值也叫做键值,所以对象的属性也可以称为键值对;

示例

// 描述心中的对象
var wuwei = {
    name: "wuwei",
    age: 18,
    sex: "male",
    eat: function (){
        console.log("I eat damifan")
    }
    
}


1. 对象的创建

创建一个对象,有两种方法,第一种比较简单,叫做字面量;第二种是用new Object()。


1.1 字面量的创建方式

plainObject 对象字面量/ 对象直接量

var obj = {
    name : "wuwei",
    age : 18,
    sex : "男"
};

console.log(obj);
console.log(obj.name);
console.log(typeof obj);

{}就是对象的界定符,就是对象的字面量。对象有属性,所谓的属性就是这个对象的特点、特性,



哲学上讲,什么是对象?对象就是属性的无序集合。

我们可以用.点操作符或者中括号法来获得一个对象的属性。那么你会发现,

公式:

{
    key : value,
    key : value,
    key : value,
    key : value,
}


1.2 属性加引号的情况

在有些特殊的情况下, 属性是必须加引号的

  1. 属性为特殊字符
  2. 属性为数字
  3. 属性中有空格
  4. 关键字、保留字(尽量不要使用)



特殊形式的属性,必须要加上引号,检索属性的时候,必须用方括号:

var obj = {
    "24&*$&#@@)@!" : "哈哈",
    "all name" : "考拉",
    "++++%%%%" : "嘻嘻",
    "var" : "么么哒",
    "function" : "嘻嘻"
} 

console.log(obj["24&*$&#@@)@!"]);
console.log(obj["all name"]);
console.log(obj["++++%%%%"]);
console.log(obj["var"]);
console.log(obj["function"]);

你会发现,JS中对象的属性名,没有特殊的规定。这是因为属性名不是标识符,没有那些规定。

  1. 如果属性名符合标识符规范,可以加引号,也可以不加引号,
  2. 如果不符合标识符规范,则属性必须加引号



对象的属性的访问(使用),点语法是有局限的,他只能访问符合标识符规范的属性

var obj = {
    name : "考拉",
    age : 18,
    sex : "男",
    "study score" : 100
}

//console.log(obj."study score");//错误的
console.log(obj["study score"]);    //正确的
console.log(obj["a" + "ge"]);       //正确的
var a = "sex";
console.log(obj[a]);            //正确的


1.3 如果属性不是一个字符串会被转成字符串
var obj = {};
var a = {key:'a'};
var b = {key:'b'};
obj[a] = 123;
obj[b] = 345;
console.log(obj[a]);


1.4 new 操作符创建对象

new Object() 构造函数创建方法

构造函数创建方法由两种,

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

    系统自带的构造函数,就像工厂生产产品,长的都一样,但彼此独立,加上new操作符,就能给你返回一个对象,用变量接收保存对象

  2. 自定义的的构造函数

    构造函数遵循大驼峰式命名规则 Person TheFirstName

var obj = new Object(); //这是一个空对象,里面没有任何属性
obj.name = "wuwei";
obj.age = 18;
obj.sex = "男";

console.log(obj);   
console.log(obj.age);   
console.log(typeof obj);



new是一个运算符,和+-*/一样是一个运算符。表示新创建一个对象。构造函数的定义和使用后面章节学习

1.5 对象操作属性
1.5.1 使用.操作符给对象添加属性

字面量方式添加属性:

var obj = {
    name : "考拉",
    age : 29,
    sex : "母"
};

构造函数方式添加属性:

var obj = new Object();
obj.name = "考拉";
obj.age = 30;
obj.sex = "男";

上面两种方式创建出来的对象,是相同的。字面量的方式直观、简单、



但是,不建议混合使用:

var obj = {};   //的确能创建一个空对象
obj.name = "考拉";   //追加属性
obj.age = 18;        //追加属性
obj.sex = "男";      //追加属性


2. 对象的属性值

对象属性值,可以是任何东西。比如数字、字符串、布尔值、正则表达式、对象、数组、函数……

var kaola = {
    name : "考拉",
    age : 22,
    peiou : {
        name : "母考拉",
        age : 37
    }
}
var obj = {
    a : 1,
    b : "哈哈",
    c : true,
    e : function(){
        console.log(1+2);
    },
    f : {
        p : 1
    }
}

特别的,当对象的属性的值是一个函数的时候,我们称这个函数是对象的方法。


3. 对象的方法

当一个对象的属性的值,是一个函数,那么这个函数我们就称为对象的“方法”(method)。

方法就是一个对象能够做的事情,一般来说,就是一个动词。比如小明的自我介绍

var xiaoming = {
    name : "小明",
    age : 18,
    sex : "男",
    sayHello : function(){
        alert("你好,我是" + xiaoming.name);
        alert("今年" + xiaoming.age + "岁了");
        alert("我是可爱的小" + xiaoming.sex + "生");
    }
}

xiaoming.sayHello();

比如上面的案例,sayHello就是一个属性,只不过它的值是一个函数,所以我们就可以说xiaoming这个对象,有sayHello方法。



j简单点学习对象“方法”,无非就是学习了一种函数的调用方式。这个函数里面的this指的是这个对象。

至于函数中的this,会有变化, 关于this到底是谁的问题,我们后面在学

var xiaoming = {
    name : "小明",
    age : 18,
    sex : "男",
    sayHello : function(){
        alert("你好,我是" + this.name);
        alert("今年" + this.age + "岁了");
        alert("我是可爱的小" + this.sex + "生");
    },
    zhangda : function(){
        this.age++;
    }
}


4. 对象的特点

  1. 对象的属性名是字符串类型,如果不是,会发生隐式类型转换
  2. 对象的属性名不能重复,如果重复,后加的属性值覆盖之前同名的属性值


5. 对象的常用操作

增加 obj.height = ‘1.8m’
删除 delete obj.name
改变 obj.name =‘xuanwu’
查看 obj.age


5.1 对象操作属性名的两种方式

点操作

obj.name 

[]操作

obj[“name”]     //  obj.name
obj[name]   


6. 对象的遍历

for-in循环 作用:遍历对象

var obj = {
    name: "wuwei",
    age:18,
    sex: "男"
}
for(var key in obj){
    console.log(key);
    consol.log(obj.key);
}

对象是和函数一样是引用数据类型


二.认识构造函数

构造函数内部原理,构造函数必须加new操作符,本来他只是一个普通的函数,加new就能产生构造函数的功能,构造函数的功能就是创建对象

一旦使用new操作符,函数内部将会隐式执行三步

  1. 隐式的创建一个对象,var this = {}
  2. 执行代码
  3. 返回this对象
function Person(name,age){
    // var this = {}
    this.name = name;
    this.age = age;
    this.sex = "男";
    this.say = function(){
        console.log(this.name);
    }
    // return this
}
var student = new Person("wuwei",18)

题目:

function Person(name,age){
    var a = 0;
    this.name = name;
    this.age = age;
    function student(){
        a ++;
        console.log(a);
    }
    this.say = student;
}

var oPerson = new Person();
oPerson.say();   // 1
oPerson.say();   // 2
var oPerson2 = new Person();
oPerson2.say();   // 1


三. 包装类

1. 数字 字符串 布尔值的包装类

基础数据类型是不能有属性和方法的大家知道吧,属性和方法只有对象才有,是对象特有的,像Function,Object,Array 都是对象,原始值不能算到对象里面的,他只是一个值,作为一个独立的个体存在

数字都是原始值对吗,不对,数字分两种,只用原始值数字才是原始值

var num = 123;            // 这是原始值数字
var num2 = new Number(123); // 这也是数字,这很明显是构造函数,然后new出来的对象,
console.log(num2);  // Number {123} 返回对象形式的123

一旦变成对象,这家伙就飞了,可以有属性可以有方法

num2.name = "wuwei";

同时它还是具有原来值的特性

var aa = num2 * 2;
console.log(aa);     // 246

字符串,布尔值完全一样

var str = new String("wuwei");
var bol = new Boolean(true);


2. undefined null 没有包装类

所以不能像对象一样是用属性和方法

undefined.name = "aa";
// 报错,报引用类型错误

现在明白了吧字符串,布尔值,数字有两种,原始值是没有属性和方法的,另外一种对象,是有属性和方法的


3. 作用

var str = "wuwei";
console.log(str.length);  //5

不是说原始值没有属性和方法吗,你这里的length是哪里来的 很明显是在操作属性啊

我们在看下能不能给他设置属性

var str = "wuwei";
str.name = 123;

// 没报错,说明赋值进去了吧,我们获取一下
console.log(str.name);  // undefined

这都是咋回事呢

记住原始值一定不能有属性和方法的,那么上面的情况是怎么回事呢,应为它经历了一个过程叫包装类

var str = "wuwei";
str.name = 123;   
// 隐式的 new String(str);
// 会新建一个字符串对象来弥补你的操作不足,
// new String(str).name = 123;   操作完成之后 delete 删除这个对象
// 这个new String没有保存在任何地方 用完直接删了

console.log(str.name);  
// 再次new Sting(str);这个和上面不是一个String,这个对象上没有name

基于这样一个理论,

var str = "wuwei";
str.length = 2;
console.log(str);

这个就是包装类,如果你发现原始值操作属性都是被隐式的包装成为了对象

测试:

var str = "wuwei";
str += 1;
var test = typeof str;
if(test.length == 6){
    test.sign = "typeof返回的结果可能是String"
}
console.log(test.sign)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。