18js学习第五天第2部分类

   // 06JavaScript的类（构造函数）
    // 类：抽象的概念 
    // 构造函数：对象的构造器    用来构造对象的函数

    // 创建一个类(函数)   类名(函数名)首字母大写

    // 人类：name  age  sex  hobby 
    function Person(name,age,sex,hobby) {
        this.eyes="黑色";
        this.hair="黑色";
        this.name=name;
        this.age=age;
        this.sex=sex;
        this.hobby=hobby;
    }  

    // 使用 Person 创建对象
    var xiaoming=new Person("小明",20,"男",function(){return "唱歌"});
    var xiaohong=new Person("小红",18,"女",function(){return "跳舞"});

    console.log(xiaoming);
    console.log(xiaohong);

    // 工厂
    function Car(color){
        this.name="比亚迪";
        this.price="16.68w";
        this.func=function(){
            return "买菜"
        }
        this.color=color;
    }

    // 生产线
    var car1=new Car("红色");
    var car2=new Car("白色");
    console.log(car1.func());
    console.log(car2.func());

  // 07JavaScript类添加属性和方法
    // 类：抽象的概念 
    // 构造函数：对象的构造器    用来构造对象的函数

    // 工厂
    function Car(color){
        this.color=color;
    }

    // prototype  返回原型对象
    console.log(Car.prototype);// 原型对象

    // 通过 prototype 向原型对象添加属性和方法
    Car.prototype.name="比亚迪";
    Car.prototype.price="16.68w";
    Car.prototype.func=function(){
        return "撩妹"
    }
    

    // 继承 类 的属性(原型部分)
    // 生产线 
    var car1=new Car("红色");
    car1.type="跑车";
    var car2=new Car("白色");
    console.log(car1);
    console.log(car2);

    
 

 // 08了解JavaScript的this指向
    // this关键字   this指向

    // 1.在构造函数中使用  指向实例对象
    function Car(color) {
        this.color = color
    }

    // 创建car的实例
    var car1 = new Car("红色");
    var car2 = new Car("黄色");
    var car3 = new Car("黑色");

    console.log(car1.color);
    console.log(car2);
    console.log(car3);

    // 2.方法(函数)被调用时  事件触发  this指向调用方法的元素
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var num3 = document.getElementById("num3");
    var num4 = document.getElementById("num4");
    var num5 = document.getElementById("num5");
    var num6 = document.getElementById("num6");
    var res=document.getElementById("res");

    num1.οnclick=function(){
        console.log(this.innerText);
        res.value+=this.innerText
    }
    num2.οnclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }
    num3.οnclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }
    num4.οnclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }
    num5.οnclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }
    num6.οnclick=function(){
        console.log(this.innerText)
        res.value+=this.innerText
    }