javascript --- ES6类和对象1

149 阅读3分钟
1. ES6之前通过构造函数来定义类
        function Person(myName,myAge){
            // let obj = new Object();
            // let this = obj;
            this.name = myName
            this.age = myAge
            this.say = function(){
                console.log(123);
            }
            // return this;
            
            //静态属性
            Person.sex = '男'
            //静态方法
            Person.run = function(){
            console.log('静态方法');
            }
        }
        let p = new Person('liu',24);
        console.log(p);  //
        console.log(Person.sex);  //男
        Person.run();  //静态方法
1.1 注意点:
    如果想将属性和方法保存到原型中, 可以动态给原型对象添加属性和方法,也可以使用对象形式
        function Person(myName, myAge) {
            this.name = myName;
            this.age = myAge;
            this.hi = function () {
                console.log("hi");
            }
        }
        // 原型上的方法
        // Person.prototype.type = "人";
        // Person.prototype.say = function () {
        //     console.log(this.name, this.age);
        // };
        Person.prototype = {
            // constructor: Person,
            type: "人",
            say: function () {
                console.log(this.name, this.age);
            }
        };
        let p = new Person();
        console.log(p);
       
2. ES6定义类
2.1ES6开始系统提供了一个名称叫做class的关键字, 这个关键字就是专门用于定义类的
2.2ES6标准中添加实例属性都需要在constructor中添加:
2.3ES标准中static只支持定义静态方法不支持定义静态变量
        class Person{
            // 当我们通过new创建对象的时候, 系统会自动调用constructor。
            //constructor我们称之为构造函数
            constructor(myName,myAge){
                this.name = myName
                this.age = myAge 
                this.say = function(){
                    console.log(123);
                } 
            } 
            //静态方法
            static run(){
                console.log(456);
            }
        }
        let p = new Person('liu',24);
        console.log(p)  
        Person.run()  //456
2.3 注意点:
    如果通过class定义类, 那么不能自定义这个类的原型对象
    如果想将属性和方法保存到原型中, 只能动态给原型对象添加属性和方法
    ES6定义类的格式, 会将方法默认放到原型对象中

            class Person{
                  constructor(myName, myAge){
                      this.name = myName;
                      this.age = myAge;
                      this.hi = function () {
                          console.log("hi");
                      }
                  }
                  run(){
                      console.log("run");
                  }
            }
            Person.prototype.type = "人";
            Person.prototype.say = function () {
                console.log(this.name, this.age);
            };
            let p = new Person("liu", 24);
            console.log(p);        
3. 继承
3.1ES6中如何继承?
     1. 在子类后面添加extends并指定父类的名称
     2. 在子类的constructor构造函数中通过super方法借助父类的构造函数
     3. 以下代码的含义: 告诉浏览器将来Student这个类需要继承于Person这个类
         class Person{
            constructor(myName, myAge){
                //this = stu;
                this.name = myName;  //stu.name = myName;
                this.age = myAge;    //stu.age = myAge;
            }
            say(){
                console.log(this.name, this.age);
            }
        }

        class Student extends Person{
            constructor(myName, myAge, myScore){
                //在子类中通过super方法借助父类的构造函数
                super(myName, myAge);
                this.score = myScore;
            }
            study(){
                console.log("day day up");
            }
        }
        let stu = new Student("zs", 18, 98);
        console.log(stu);
        stu.say();
4. 获取对象类型
     let obj = new Object();  --> object
     let arr = new Array();  --> Array
     
     let obj = new Object();
     console.log(typeof obj);  //object
     console.log(obj.constructor.name);  //Object

     let arr = new Array();
     console.log(typeof arr);  //object
     console.log(arr.constructor.name);  //Array
5. instanceof关键字
5.1 instanceof用于判断 "对象" 是否是指定构造函数的 "实例"
5.2 instanceof注意点:只要 构造函数的原型对象出现在实例对象的原型链中都会返回true(继承关系)
        //1.
        class Person{
            constructor(myName){
                this.name = myName
            }
        }
        let p = new Person();
        console.log(p instanceof Person);  //true

        //2.
        class Person{
            constructor(myName){
                this.name = myName
            }
        }
        class Student extends Person{
            constructor(myStore){
                super(myName)
                this.store = myStore
            }
        }
        let s = new Person();
        console.log(s instanceof Person);  //true
6. isPrototypeOf属性
6.1 isPrototypeOf用于判断 一个对象是否是另一个对象的原型
6.2 isPrototypeOf注意点:
            //1.
            class Person{
                constructor(myName){
                    this.name = myName
                }
            }
            let p = new Person();
            console.log(Person.prototype.isPrototypeOf(p));  //true

            //2.
            class Person{
                constructor(myName){
                    this.name = myName
                }
            }
            class Student extends Person{
                constructor(myStore){
                    super(myName)
                    this.store = myStore
                }
            }
            let s = new Person();
            console.log(Person.prototype.isPrototypeOf(s));  //true
    
7. 判断对象属性
7.1 需求: 判断某一个对象是否拥有某一个属性
     1. in的特点: 只要类中或者原型对象中有, 就会返回true
     2. hasOwnProperty方法特点: 只会去类中查找有没有, 不会去原型对象中查找
        class Person{
            constructor(myName,myAge){
                this.name = myName
                this.age = myAge
            }
        }
        Person.prototype.sex='男'
        let p = new Person();
        //in的特点: 只要类中或者原型对象中有, 就会返回true
        console.log('name' in p);  //true
        console.log('sex' in p);  //true
        //特点: 只会去类中查找有没有, 不会去原型对象中查找
        console.log(p.hasOwnProperty('sex'));  //false
8. 对象增删改查(类)
        class Person{}
        let p = new Person()

        // 增加(C)
        p.name1 = 'liu'
        p['name2'] = 'fu'
        p.say1 = ()=>{
            console.log('say1方法')
        }
        p['say2'] = ()=>{
            console.log('say2方法')
        }

        //删除(R)
        delete p.name1
        delete p['name2']
        delete p.say1
        delete p.say2


        //修改(U)
        p.name1 = 'liu1'
        p.name2 = 'fu2'
        p.say1 = ()=>{
            console.log('say1方法1')
        }
        p['say2'] = ()=>{
            console.log('say2方法2')
        }

        //查询(D)
        console.log(p.name1)
        console.log(p.name2)
        console.log(p.say1)
        console.log(p.say2)