• JavaScript 的继承


      学习怎样创建对象是理解面向对象编程的第一步,第二步是理解继承。
      JS的继承方式与传统的面向对象编程语言不同,继承可以发生对象之间,这种继承的机制是我们已经熟悉的一种机制:原型

      一.原型链接和Object.prototype

      js内置的继承方式被称为原型链接原型继承

      原型链:对象会继承自己原型对象中的属性,而这个原型会继续继承自己的原型,依此类推
                  所有的对象都继承 Object.prototype
        

      var book = {
          title:'黑客与画家'
         };
         var prototype = Object.getPrototypeOf(book);
         console.log(prototype === Object.prototype)//true

    从Object.prototype中继承的方法
    .hasOwnProperty() 判断对象中有没有某个属性 .propertyIsEnumerable() 判断对象是否可枚举 .isPrototypeOf() 判断一个对象是否是另一个对象的原型 .valueOf() 返回对象值的表示形式 .toString() 返回对象的字符串表示形式 .toLocaleString() 返回对象的本地保存形式
    valueOf() 当我们操作对象时就会被调用。默认情况下会返回对象实例。对于字符串,布尔值和数字类型的值,首先会使用原始包装器包装成对象,在调用方法。
     var now = new Date();
     var earlier = new Date(2010,3,28)
     console.log(now > earlier)  //true
     console.log(now.toString()) //Fri Sep 15 2017 19:44:20 GMT+0800 (中国标准时间)
     console.log(now.toLocaleDateString()) //2017/9/15

    二. 对象继承

    最简单的继承方式是对象间的继承。我们所需要做的就是指定新创建的对象的原型指向哪个对象。Object字面量的形式创建的对象默认将__proto__属性指向了Object.prototype,但是我们可以通过Object.create()方法将__proto__属性指向其它对象

    var person1 = {
    name:'李三婆',
    sayName:function(){
    console.log(this.name);
    }
    };
    var person2 = Object.create(person1,{
    name:{
    value:'刘老二',
    enumerable:true,
    }
    })
    
    person1.sayName() //李三婆
    person2.sayName() //刘老二
    console.log(person2.hasOwnProperty('sayName'))//false
    console.log(person1.hasOwnProperty('sayName'))//true
    console.log(person1.isPrototypeOf(person2))//true

    三.构造函数继承

    //1.简单示例:
    var pander = {
    name:'李四',
    constructor:Persion
    }
    function Persion(name){
    this.name = name
    } 
    
    Persion.prototype = pander 
    var person1 = new Persion()
    console.log(pander.isPrototypeOf(person1))//true
    console.log(person1)

    //2.由于prototype属性是可写的,因此通过复写它我们可以改变原型链。例如:
    function Rectangle(length,width){
    this.length = length;
    this.width = width;
    }
    Rectangle.prototype.getArea = function(){
    return this.length * this.width;
    }
    Rectangle.prototype.toString = function(){
    return '[Rectangle '+this.length+' x '+this.width+']'
    }
    Rectangle.prototype.getBoder = function(){
    return 4;
    }
        
    // 继承 Rectangle
    function Square(size){
    Rectangle.call(this, size,size)
    }
    
    Square.prototype = new Rectangle;
    Rectangle.prototype.constructor = Rectangle;
    
    Square.prototype.toString = function(){
    var text = Rectangle.prototype.toString.call(this);
    return text.replace('Rectangle','Square') 
    }
    Square.prototype.getBoder = function(){
    return 'Square边数:' + Rectangle.prototype.getBoder();
    }
    
    var square = new Square(20)
    //console.log(square.getArea()) //400
    //console.log(square.toString()) //[Square 20 x 20]
    //console.log(square.getBoder()) //Square边数:4

    在上面的代码,使用Square.prototype.toString()和call()方法一起调用Rectangle.prototype.toString()。
    这个方法只需要在返回结果之前将Rectangle替换成Square就可以了。

  • 相关阅读:
    jquery及相关兼容插件的版本搭配
    jquery IE7 下报错:SCRIPT257: 由于出现错误 80020101 而导致此项操作无法完成
    兼顾php和jquery新版本的checkbox的写法
    jquery.validate动态更改校验规则 【转】
    Google的10大座右铭
    用jQuery屏蔽掉按回车键时提交表单
    sizeof()和strlen()在求字符串长度时的差别
    Matlab使用心得
    C++ 数据类型及相关问题 及输出精度控制
    原生javascript满屏上下滚动
  • 原文地址:https://www.cnblogs.com/sw91092/p/7528514.html
Copyright © 2020-2023  润新知