JavaScript学习笔记（七）

3.3 对象(Object)

3.3.1 JS中为什么要用对象

• 函数参数如果特别多的话，可以使用对象简化
• 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

3.3.2 什么是对象

现实生活中：

• 万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征
  eg：一部手机、一个冰箱、一台电脑

类和对象

• 类：描述一类事物（JS中可以自定义类，同时也提供了一个默认的类，叫做：Object）
  eg：手机是一类事物，可以称为手机类；而我们手上具体的一部手机才是一个真正的对象
• 对象：描述一个具体的事物，相当于“成品”
  对象具体的特征和行为：
  特征：长方形、大屏幕 >>> “属性”
  行为：打电话、发短信 >>> “方法”

3.3.3 JS中的对象

• JS中的对象是无序属性的集合，其属性可以包含基本值、对象或函数
• 对象就是一组没有顺序的值，由一组组键值对构成
• 事物的特征在对象中用属性来表示
• 事物的行为在对象中用方法来表示

3.3.4 JS中对象的分类

• 内建对象
  由ES标准中定义的对象，在任何的ES的实现中都可以使用
  比如：String Number Boolean Function Object Math …
• 宿主对象
  由JS的运行环境提供的对象，现在主要指由浏览器提供的对象
  比如: BOM对象, DOM对象
• 自定义对象
  我们自己创建的对象
  比如: Person, Dog, …

3.3.5 对象字面量

• 字面量： 10086，‘itlike’，true，null，undefined，[ ]，{ }

• 示例：

    var cc ={
        //属性
        name: "超超",
        age : 20,
        sex : "男",
        //方法
        learn : function(){
            console.log("超超可以学编程！");
        }
    }
    console.log(cc); // 返回 cc 对象的所有属性
    console.log(typeof cc); // 返回 object
  

3.3.6 常见创建对象方式

• 对象字面量

    var cc ={
    name: "超超",
    age : 20,
    sex : "男",
    learn : function(){
        console.log("超超可以学编程！");
    }
     };
     console.log(cc);
     console.log(typeof cc);
  

• new object()创建对象

    var cc = new Object();
    cc.name ="超超",
    cc.age =20,
    cc.sex ="男",
    cc.learn = function(){
        console.log("超超可以学编程！");
        };
         console.log(cc);
         console.log(typeof cc);
  

• 工厂函数创建对象

    function createPerson(name,age,sex) {
    var cc = new Object();
    cc.name = name,
    cc.age = age,
    cc.sex = sex,
    cc.learn = function () {
        console.log("回家的诱惑！");
        };
    return cc;
    }
     var c1 = createPerson("世贤",21,"女");
     var c2 = createPerson("艾莉",22,"女");
     console.log(c1);
     console.log(c2);
  

• 自定义构造函数

    function Person(name,age,sex) {
    this.name = name,
    this.age = age,
    this.sex = sex,
    this.learn = function () {
        console.log("回家的诱惑！");
        }    
  
     }
     var c1 = new Person("世贤",21,"女");
     var c2 = new Person("艾莉",22,"女");
     console.log(c1);
     console.log(c2);
  

3.3.7 属性和方法

• 属性：如果一个变量属于一个对象所有，那么该变量就可以被称为该对象的一个属性
• 方法：如果一个函数属于一个对象所有，那么该函数就可以被称为该对象的一个方法

3.3.8 new关键字

• 概念：new关键字一般和构造函数一起配合使用
• 构造函数：
  1.构造函数是一种特殊函数
  2.构造函数用于创建一类对象，首字母要大写
  3.构造函数要和new一起使用才有意义
• new做了哪些事：
  1.new先在内存中创建一个新的空对象
  2.new会让this指向这个新对象
  3.执行构造函数，给这个新对象加属性和方法
  4.返回这个新对象
  

3.3.9 this关键字

• 概念：this是一根指针
• 几个特点：
  1.普通函数执行，内部this指向全局对象window
  2.函数在定义的时候this是不确定的，只有在调用的时候才可以确定
  3.如果函数作为一个对象的方法，被该对象所调用，那么函数内的this则指向该对象
  4.构造函数中的this是一个隐式对象，类似一个初始化模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化
• 案例演示（与上一点对应演示）

var str = '张三';
function func() {
    console.log(this);
    console.log(this.str);
}
func();

2.
3.

	var obj ={
    name : 'cc',
    func : function () {
    console.log(this);
    console.log(this.name);

    }
};
     obj.func();

4.

	function Fn(){
    this.name = "世贤";
    this.age = 20;
    this.sex = '女';
    console.log(this);
}
	var object = new Fn();
	new Fn();

3.3.10 对象使用

• 访问对象的属性

     var cc = {
    name : "超超" ,
    age : 20,
    sex : "男" ,
    learn : function(){
        console.log("学习编程！");
    }
    };
    console.log(cc.name);  //  超超
    console.log(cc['name']);  //  超超
  

• 遍历对象的属性 for…in…

    var cc = {
    name : "超超" ,
    age : 20,
    sex : "男" ,
    learn : function(){
        console.log("学习编程！");
        }
        };
        for(var Key in cc){
    console.log(Key + ":" + cc[Key]);
     }
  

• 删除对象的属性

    var cc = {
    name : "超超" ,
    age : 20,
    sex : "男" ,
    learn : function(){
        console.log("学习编程！");
    }
    };
    delete cc.name;  //  删除name 属性
    delete cc.age;  //  删除 age 属性
    console.log(cc);
  

3.3.11 基本类型和引用类型在堆栈的表示

• 基本数据类型

    String Number Boolean Null Undefined
  

• 引用数据类型

    Object
  

• 区别

1. JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在，修改一个变量不会影响其他的变量
2. 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，当一个通过一个变量修改属性时，另一个也会受到影响

• 堆和栈
  堆（操作系统）：操作系统自动分配与释放，存放函数的参数值，局部变量等
  栈（操作系统）：存储复杂数据类型（对象），一般由自己分配与释放，若创建者不主动释放，由垃圾回收机制回收

     注意：JS中其实没有堆和栈的概念，
     这样讲是为了便于理解，
     但JS与其他语言的存储方式是一致的
  

• 注意点
  1.比较两个基本数据类型的值时，就是比较值。
  2.比较两个引用数据类型时，它是比较的对象的内存地址，如果两个对象是一摸一样的，但是地址不同，它也会返回false

• 画图分析
  1.基本类型在内存中的存储
  
  2.复杂类型类型在内存中的存储
  
  3.基本类型作为函数的参数
  
  4.复杂类型作为函数的参数
  

  复杂数据类型：一个变量改变，与它相关的另一个变量也会改变
  简单数据类型：一个变量改变，与它相关的另一个变量不会改变