美文网首页
JS自定义构造函数的方式实现下面功能

JS自定义构造函数的方式实现下面功能

作者: 鲁女女 | 来源:发表于2020-01-03 21:09 被阅读0次

    测试题1:
    苹果pro 12 手机是黑色的,重量是0.6kg,价格是12000元,可以打电话,发短信
    华为mate x 5G 手机是蓝色的,重量是0.7kg,价格是74999元,可以打电话,发短信,看电影

    • 方式1:
    //手机的构造函数
    function Phone(color,weight,price) {
        this.color = color; //初始化颜色
        this.weight = weight;// 重量
        this.price = price; // 价格
        // 定义方法
        this.call = function () {
            console.log("这个手机可以打电话");
        }
        this.sendMessage = function () {
            console.log("这个手机可以发短信");
        }
    }
    
    //实例化对象,并初始化
    var phonePro = new Phone('黑色','0.6kg',12000);
    phonePro.call(); // 调用打电话的方法
    phonePro.sendMessage(); // 调用发短信的方法
    console.log(phonePro.color); //打印实例化对象的颜色
        
    var mate = new Phone('蓝色','0.7kg',74999);
    mate.lookMovies = function () {
        console.log("这个手机可以看电影")
    }
    mate.sendMessage();
    mate.lookMovies();
    
    • 方式2
    //手机构造函数
    function Phone(color,weight,price) {
        this.color = color; //颜色
        this.weight = weight; //重量
        this.price = price; //价格
    }
    
    //原型对象上添加方法
    Phone.prototype.call = function () {
        console.log("打电话");
    }
    Phone.prototype.sendMessage = function () {
        console.log("发短信");
    }
    
    
    //苹果手机的构造函数
    function  applePhone(color,weight,price) {
        this.color = color; //颜色
        this.weight = weight; //重量
        this.price = price; //价格
    }
    // 实现继承
    applePhone.prototype = new Phone();
    
    //实例化苹果手机
    var apple = new applePhone('黑色','0.6kg',12000);
    
    apple.call();
    apple.sendMessage();
    
    //华为手机的构造函数
    function  matePhone(color,weight,price) {
        this.color = color; //颜色
        this.weight = weight; //重量
        this.price = price; //价格
    }
    // 实现继承
    matePhone.prototype = new  Phone();
    
    // 原型上添加方法
    matePhone.prototype.lookMovies = function () {
        console.log("可以看电影");
    }
    
    // 实例化华为手机
    var matePhone = new matePhone('蓝色','0.7kg',74999);
    matePhone.call();
    mate.sendMessage();
    matePhone.lookMovies();
    

    测试题2:
    华华有一辆五菱宏光的车,该车是银白色,重量是500kg,该车可以载人载货,华华总是开车猫哥兜风,偶尔开车拉货赚钱。

    //车的构造函数
    function  Car(color,weight) {
        this.color = color;
        this.weight = weight;
    }
    
    //原型添加方法
    Car.prototype.run = function () {
        console.log("载人载货");
    }
    
    //人的构造函数
    function  Person(name) {
        this.name = name;
        this.car = new Car('银白色','500kg');//此时car是一个属性,该属性内部存储的是一个对象
    }
    
    //通过原型添加方法
    Person.prototype.drive = function(){
        console.log(this.name + "带着猫哥兜风");
        this.car.run(); //调用的是car这个属性中的一个方法(为什么可以调用,因为car虽然是一
        //个属性,但是也是一个Car构造函数的实例对象)
        //因为实例对象可以调用该实例对象对应的构造函数的原型对象上的方法
    }
    Person.prototype.comeMoney = function(){
        console.log(this.name + "拉货赚钱");
    }
    
    //实例化华华对象
    var huahua = new Person("花花");
    huahua .comeMoney();
    huahua .drive();
    

    相关文章

      网友评论

          本文标题:JS自定义构造函数的方式实现下面功能

          本文链接:https://www.haomeiwen.com/subject/rfetactx.html