ES5_对象 与 继承

2022-10-14,

1. 对象的定义

  //定义对象
  function user(){

        //在构造方法中定义属性
        this.name = '张三';
        this.age = 12;

        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    user.prototype.sex = '男';

    //原型链中定义方法
    user.prototype.work = function(){
        alert(this.name + '在工作')
    }

    // 静态方法的声明
    user.getinfo =  function () {
        alert('我是静态方法')
    }

    //对象的使用: 实例化对象
    var user = new user('张三',  3);

    //属性的调用
    alert('姓名:'+ user.name + '; 性别:' + user.sex); // 弹出:  姓名:张三; 性别:男

    //给对象属性重新赋值
    user.name = '李四';
    user.sex = '女';

    //方法的调用
    user.run(); // 弹出:李四在跑步
    user.work(); // 弹出:李四在工作

    //静态方法的调用
    user.getinfo(); // 弹出:  我是静态方法

注意: 原型链中声明属性将会多个实例共享,而构造函数不会

 

对象的继承

1. 对象的继承 之 对象冒充继承

 function user(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    user.prototype.sex = '男';

    //原型链中定义方法
    user.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 对象冒充继承
    function student(){
        
        //student 继承 user对象,此方法叫: 对象冒充继承
        user.call(this);
    }

    var student = new student();
    student.run(); // 弹出:张三在跑步
    student.work(); //报错,原因是:  对象冒充继承的方法只继承对象的构造函数的属性和方法

注意: 对象冒充继承的方法 只能 继承对象的构造函数的属性和方法,不能 继承原型链中的函数和方法

 

2. 对象的继承 之 原型链继承

 function user(){
        this.name = '张三';
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    user.prototype.sex = '男';

    //原型链中定义方法
    user.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //对象中的继承一: 原型链继承实现继承
    function student(){
    }
    student.prototype = new user();

    var student = new student();
    student.run(); // 弹出:张三在跑步
    student.work(); // 弹出:张三在工作

注意:原型链继承的方法 可以 继承对象的构造函数的属性和方法,也可以 继承原型链中的函数和方法

  function user(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    user.prototype.sex = '男';

    //原型链中定义方法
    user.prototype.work = function(){
        alert(this.name + '在工作')
    }

    //带参数对象的实例化方法: 
    var user1 = new user('张三');
    user1.run(); // 弹出: 张三在跑步
    user1.work(); // 弹出:张三在工作


    //对象中的继承一: 原型链继承实现继承
    function student(name){
    }
    student.prototype = new user();

    var student = new student('李四');
    student.run(); // 弹出: undefined在跑步
    student.work(); // 弹出:undefined在工作

 

注意:原型链继承有个缺点就是 在实例化子类时,无法 给父类传参,如上代码,子类调用父类的方法时, 弹出传参属性为 undefined

为了解决此缺点,则可以使用  冒充对象继承 + 原型链继承的组合模式

 

3.  冒充对象继承 + 原型链继承的组合模式

function user(name){
        this.name = name;
        //在构造方法中定义方法:
        this.run = function(){
            alert(this.name + '在跑步')
        }
    }

    //原型链中定义属性
    user.prototype.sex = '男';

    //原型链中定义方法
    user.prototype.work = function(){
        alert(this.name + '在工作')
    }


    //对象中的继承一: 原型链继承实现继承
    function student(name){

        //冒充对象继承时,可以给父类传参
        user.call(this, name);
    }
   
    //原型链继承父类
    //student.prototype = new user();

    //因冒充对象继承时,已经继承了父类的构造函数中的属性和方法,因此在原型链继承中也可只继承父类的原型链的属性和方法,即
    student.prototype = user.prototype;
    
    
    var student = new student('李四');
    student.run(); // 弹出: 李四在跑步
    student.work(); // 弹出:李四在工作

 

《ES5_对象 与 继承.doc》

下载本文的Word格式文档,以方便收藏与打印。