美文网首页
走进面向对象编程世界第二步(prototype&new&clas

走进面向对象编程世界第二步(prototype&new&clas

作者: 林立镇 | 来源:发表于2017-08-03 00:16 被阅读0次
    先介绍一下javascript的数据类型

    基本类型:数值(123)、字符串(“abc”)、布尔值(true | false)
    对象类型:Object、包装对象(Number、String、Boolean)、Array、Function
    先介绍这些常用的
    对这些数据类型可能刚学的时候有些疑问,具体是哪些呢

    1. 我们知道基本类型没有属性,但是为什么可以写这样的代码?
    var string = "hello world"string.split(' ') 
    // ['hello', 'world']
    
    请问 string.split 方法是哪里来的?
    • JavaScript引擎内部在处理对某个基本类型,比如字符串基本类型
    • 会在内部临时创建一个对应的包装类型(就是String类型)的临时对象,
    • 并把对基本类型的操作代理到对这个临时对象身上,
    • 使得对基本类型的属性访问看起来像对象一样。
    • 但是在操作完成后,临时对象就扔掉了,
    • 下次再访问时,会重新建立临时对象,
    • 当然对之前的临时对象的修改都不会有效了。
    2. 再举个例子,var array = [] 为什么有 push 属性?

    array是array基本类型,本身是没有任何属性的
    但是当它使用对象类型中的Array数据类型的属性时,
    就会临时生成一个值和基本类型值一样的复合对象,
    然后调用相应的属性或函数方法,返回结果,
    然后这个临时对象被清除,
    原本的基本类型的值则不变
    依次类推其它的基本类型

    3. 什么是「伪数组」?

    伪数组和数组的键都是有序的数字,有length属性
    但是伪数组的原型指向Object
    数组的原型指向Array

    举例说

    var 伪数组=new Object({0:"a",1:"b",length:2})
    var 数组 =new Array("a","b")
    伪数组.length===数组.length
    伪数组 instanceof Object
    伪数组.__proto__===Object.prototype
    数组 instanceof Array
    数组.__proto__===Array.prototype
    

    上面几个全等的值都是true

    4. new Number(1)和1 的区别是什么?

    1是基本类型number,没有属性
    new Number(1)是复合类型object,封装了系统给它的许多属性和函数方法,
    因为new Number(1)的原型是全局变量Number,它是复合类型中的[object Number]

    举例说明

    1===1,
    1.__proto__则会出错
    new Number(1)!==1
    //true
    new Number(1).__proto__===Number.prototype
    //true
    
    5. 为什么说所有对象都来自 Object()

    因为所有的对象的原型链上,都会有一个原型是Object
    所以说数组Array,函数Function,包装对象Number、String等都是对象

    举例说明

    var 数组 = new Array()
    数组.__proto__===Array.prototype
    //true
    Array.__proro__===Function.prototype
    //true
    Array.prototype.__proto__===Object.prototype
    //true
    var 函数 = new Function()
    函数.__proto__===Function.prototype
    //true
    Function.__proto__===Function.prototype
    /true
    Function.prototype.__proto__===Object.prototype
    //true
    Object.__proto__===Function.prototype
    //true
    Object.prototype.__proto__
    //null
    
    在了解了上面的一些对象的知识之后,
    可以看看日常工作中面向编程是怎么实现的?

    写一个士兵构造函数 Soldier,实现 var s = new Soldier(1) 之后,s 拥有两个自身属性(id和生命值)、三个共有属性(run、walk、die)

    function Soldier(id){
    this.id=id;
    this.生命值=42;
    }
    Soldier.prototype={
    run:function(){},
    walk:function(){},
    die:function(){}
    }
    var s=new Soldier(1)
    s
    

    控制台

    Soldier {id: 1, 生命值: 42}
    id: 1生命值: 42
    __proto__: Objectdie: 
    function ()run: function ()walk: function ()
    __proto__: Object
    

    对于初学者,会不会有疑问,为什么不同return,this又是哪里跑出来的疑问呢?

    function Soldier(id){
    var 临时对象 = {}
    临时对象.__proto__ = Soldier.prototype
    临时对象.id=id;
    临时对象.生命值=42;
    return 临时对象
    }
    Soldier.prototype={
    run:function(){},
    walk:function(){},
    die:function(){}
    }
    var s=new Soldier(1)
    s
    

    其实,this可以看出是一个临时的对象,
    这个对象的原型指向构造函数的prototype原型对象
    最后会返回这个对象,JS之父简化了这段代码,所以少了3行代码

    使用ES6的Class语法,也可以实现这个例子
    class Soldier {
      constructor(id) {
        this.id = id;
        this.生命值 = 42;
      }
      run(){}
      walk(){}
      die(){}
    }
    var s=new Soldier(1)
    s
    
    • 要注意class不能重复声明,会出错,
    • 使用function声明后,也不能声明同样的类,
      因为class可以看出是function的语法糖

    相关文章

      网友评论

          本文标题:走进面向对象编程世界第二步(prototype&new&clas

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