js - 对象

js - 对象

一、简介

1、 对象属于一种复合数据类型，在对象中可以保存多个不同数据类型的属性

2、对象的分类
   1）内建对象
      -由ES标准中定义的对象，在任何的ES的实现中都可以使用
      -比如：Math String Number Boolean Function Object ....
   2）宿主对象
      -由JS的运行环境提供的对象，目前来讲主要是指由浏览器提供的对象
      -比如BOM DOM
   3）自定义对象
      -由开发人员自己创建的对象
3、创建对象
   1）使用new关键字创建对象
      -使用new关键字调用的函数，是构造函数constructor
      -构造函数是专门用来创建对象的函数
      -使用typeof检查一个对象时，会返回object
4、对象
   1）属性
      -在对象中保存的值称为属性
      -向对象中添加属性 语法：对象.属性名 = 属性值
      -读取对象中的属性 语法：对象.属性名
      -如果读取对象中没有的属性，不会报错而是会返回undefined
      -删除对象中的属性 语法：delete 对象.属性名
   2）属性名
      -对象的属性名不强制要求遵守标识符的规范  例：obj.var = 123
      -如果要使用特殊的属性名，不能采用.的方式来操作，需要使用另一种方式，语法：对象["属性名"] = 属性值  例：obj["123"] = 456
      -使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，根据变量的值去读取相应的属性值
   3）属性值
      -js对象的属性值，可以是任意的数据类型，甚至也可以是一个对象
5、in 运算符
   1）通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true，没有则返回false
   2）语法："属性名" in 对象

二、基本数据类型和引用数据类型

js中的变量都是保存到栈内存中的。

   1、基本数据类型
      1）基本数据类型的值直接在栈内存中存储，值与值之间相互独立，修改一个变量不会影响其他的变量

   2、对象
      1）对象（引用数据类型）值保存在堆内存中，每创建一个新的对象（new），就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址（对象的引用）

三、this

1、解析器在调用函数时，每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称之为函数执行的上下文对象

2、根据函数的调用方式的不同，this会指向不同的对象，看谁最后调用这个函数（方法），this就指向谁

四、使用工厂方法创建对象

4.1 概述

1、使用工厂方法创建对象：通过该方法可大批量的创建对象

2、使用工厂方法创建的对象，使用的构造函数都是Object，所以创建的对象都是Object这个类型，这样会导致我们无法区分出多种不同类型的对象

4.2 实例

function createPerson(name, age, gender){
                 let obj = new Object();
                 obj.name = name;
                 obj.age = age;
                 obj.gender = gender;
                 obj.sayName = function(){
                     console.log(obj.name);
                 }
                 return obj;
             }

             let obj1 = createPerson('孙悟空', 18, '男');
             let obj2 = createPerson('孙悟净', 8, '男');
             console.log(obj1);
             console.log(obj2);
             obj1.sayName();

五、构造函数

5.1 概述

1、构造函数:
    -构造函数就是一个普通的函数，创建方式和普通函数没用区别，不同的是构造函数习惯上首字母大写
    -构造函数和普通函数的区别就是调用方式的不同，普通函数是直接调用，而构造函数需要使用new关键字来调用
2、构造函数的执行流程：
    1）立刻创建一个新的对象 
    2）将新建的对象设置为函数中的this（将this指向这个新建的对象）
    3）逐行执行函数中的代码 
    4）将新建的对象作为返回值返回
3、使用instanceof可以检查一个对象是否是一个类的实例
   语法：对象 instanceof 类名（构造函数名）         
4、类:
   -ES6中提出的
   注：1）在类中声明方法时，不要给该方法加上function关键字
      2）方法直接不要用逗号分隔，否则会报错

5.2 实例

<script>

            /* function say(){
                console.log(this.name);
             }*/
             
             function Person(name, age, gender){
                this.name = name;
                this.age = age;
                this.gender = gender;
                // 每创建一个对象，就会将该方法进行一次声明，从而造成了资源的浪费，因此可以通过函数赋值的方式进行使用
                /*this.sayName = function(){
                    console.log(this.name);
                }*/
                //这种方式会造成不安全，因为函数定义在外部
               // this.sayName = say;
             }

            Person.prototype.sayName = function(){
                console.log(this.name);
            }

            class People{
                constructor(name, age, gender){
                    this.name = name;
                    this.age = age;
                    this.gender = gender;
                }

                sayName(){
                    console.log(this.name);
                }
            }

             let obj1 = new Person('孙悟空', 18, '男');
             let obj2 = new Person('白骨精', 36, '女');
             let obj3 = new Person('猪八戒', 20, '男');
             let obj4 = new Person('玉兔精', 16, '女');
             let obj5 = new Person('女儿国国王', 10, '女')

             let p1 = new People('唐僧', 18, '男');

             console.log(obj1);
             console.log(obj2);
             obj1.sayName();
             obj2.sayName();
             console.log(obj1.constructor.name);
             console.log(obj1.__proto__)

             console.log("===========")
             console.log(p1);
             console.log(p1.sayName());

             console.log("===========")

             let people = [obj1, obj2, obj3, obj4, obj5, p1];
             let newArray = [];
             newArray = people.filter(item => {
                 return item.age >= 18;
             })
             newArray.forEach(item => {
                console.log("我是" + item.name + "今年" + item.age + "岁" + "是个" + item.gender + "孩子");
             })
         </script>

六、原型对象

6.1 概述

原型 prototype
   1、创建一个函数时，解析器（浏览器）会向函数中添加一个属性prototype，这个属性对应着一个对象，这个对象就是我们所谓的原型对象
   2、如果函数作为普通函数调用prototype没用任何作用
   3、当函数以构造函数的形式调用时，它所创建的对象都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
   4、原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中
   5、当我们访问一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用，如果没有则去原型的原型中寻找， 直到查找到Object对象，Object对象原型没用原型为null，如果还未找到，则返回undefined（原型链）
   6、使用in检查对象中是否含有某个属性时，如果对象中没用，但是原型中有，也会返回true
   7、可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性

6.2 实例

<script>

             function MyClass(){

             }

             MyClass.prototype.a = 123;
             MyClass.prototype.sayHello = function(){
                 console.log('hello');
             }

             let mc1 = new MyClass();
             console.log(mc1.a);
             console.log(mc1.sayHello());

             let mc2 = new MyClass();
             mc2.a = "Tom";
             console.log(mc2.a);
             console.log(mc2.sayHello());
             
         </script>

七、原型链继承

7.1 概述

方式1：原型链继承
   1、流程
      - 定义父类型构造函数
      - 给父类型的原型添加方法
      - 定义子类型的构造函数
      - 创建父类型的对象赋值给子类型的原型
      - 将子类型原型的构造属性设置为子类型
      - 给子类型原型添加方法
      - 创建子类型的对象：可以调用父类型的方法
   2、关键
      - 子类型的原型为父类型的一个实例对象

7.2 实例

<script>
            // 父类型
            function Supper(){
                this.supProp = "Supper property";
            }   
            Supper.prototype.showSupperProp = function(){
                console.log(this.supProp);
            }

            // 子类型
            function Sub(){
                this.subProp = "Sub property";
            }
            // 子类型的原型为父类型的一个实例对象
            Sub.prototype = new Supper();
            // 让子类型的原型的constructor指向子类型
            Sub.prototype.constructor = Sub
            Sub.prototype.showSubProp = function(){
                console.log(this.subProp);
            }

            let s1 = new Sub();
            s1.showSupperProp();
            s1.showSubProp();
        </script>

八、借用构造函数继承

8.1 概述

方式2：借用构造函数继承（假的）
    1、流程
       - 定义父类的构造函数
       - 定义子类的构造函数
       - 在子类型构造函数中调用父类型的构造函数
    2、关键
       - 在子类型构造函数中通过调用call()调用父类型的构造函数

8.2 实例

function Person(name, age){
                this.name = name;
                this.age = age;
            }

            function Student(name, age, id){
                Person.call(this, name, age);
                this.id = id;
            }

九、组合继承

9.1 概述

方式3：原型链 + 借用构造函数 的组合继承
    1、利用原型链实现对父类型对象的方法继承
    2、利用call()借用父类型构造函数初始化相同的属性

9.2 实例

<script>
            function Person(name, age){
                this.name = name;
                this.age = age;
            }
            Person.prototype.getName = function(){
                console.log(this.name);
            }

            function Student(name, age, id){
                Person.call(this, name, age);  // 为了得到属性
                this.id = id;
            }
            Student.prototype = new Person(); // 为了看到父类型的方法
            Student.prototype.constructor = Student;
            Student.prototype.getId = function(){
                console.log(this.id);
            }

        </script>