欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES5_对象 与 继承

程序员文章站 2023-02-02 20:59:46
1. 对象的定义 注意: 原型链中声明属性将会多个实例共享,而构造函数不会 对象的继承 1. 对象的继承 之 对象冒充继承 注意: 对象冒充继承的方法 只能 继承对象的构造函数的属性和方法,不能 继承原型链中的函数和方法 2. 对象的继承 之 原型链继承 注意:原型链继承的方法 可以 继承对象的构造 ......

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(); // 弹出:李四在工作