Javascript面向对象(下)

发表于 | 更新于 | 分类于

什么是包装对象

基本类型都有自己对应的包装对象：String、Number、Boolean

1
2
var str='hello';
str.charAt(0) // 基本类型会找到对应的包装对象类型，然后包装对象把所有的属性和方法给了基本类型，包装对象消失

什么是原型链

实例对象与原型之间的连接，叫做原型链（proto）

面向对象的一些属性和方法

  • hasOwnProperty()：看是不是对象自身下面是属性

    1
    2
    3
    4
    5
    var arr=[];
    arr.num=10;
    Array.prototype.num2=20;
    console.log(arr.hasOwnProperty('num') //true
    console.log(arr.hasOwnProperty('num2') //false

  • constructor：查看对象的构造函数

    1. 每个原型都会自动添加constructor属性
    2. for…in 的时候属性是找不到的
    3. 避免修改constructor属性
  • instanceof：运算符，判断对象与构造函数在原型链上是否有关系
  • toString()：Object上的方法
    1. 系统对象下的都是自带的，自己写的对象都是通过原型链找Object下的 
      1
      2
      3
      4
      5
      var arr=[];
      console.log(arr.toString==Object.prototype.toString) //false
      function Aaa(){}
      var a1=new Aaa();
      console.log(a1.toString==Object.prototype.toString) //true

  1. 把对象转字符串

  2. 进制转换

    1
    2
    var num=255
    console.log(num.toString(16)) //ff

  3. 做类型判断

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var arr=[];
    console.log(Object.prototype.toString.call(arr)=='[object Array]') //true
     
    var arr1=new Date
    console.log(Object.prototype.toString.call(arr1)=='[object Date]') //true
     
    var arr1=new RegExp
    console.log(Object.prototype.toString.call(arr1)=='[object RegExp]') //true

    var arr1=null
    console.log(Object.prototype.toString.call(arr1)=='[object Null]') //true

    //遇到特殊iframe
    window.onload=function(){
       var oF=document.createElement('iframe');
       document.body.appendChild(oF);
       var ifArray=window.frames[0].Array;
       var arr=new ifArray(); 
       // 判断是否为数组的三种方法，遇到iframe用toString()判断
       console.log(arr.constructor==Array); //false
       console.log(arr instanceOf Array );  //false
       console.log(Object.prototype.toString.call(arr)=='[object Array]') //true
    }

对象的继承

  1. 什么是继承
    • 在原有对象的基础上，略作修改，得到一个新的对象
    • 不影响原有对象的功能

  2. 如何添加继承

    • 属性：call 调用父类的构造函数
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function CreatePerson(name,sex){ // 父类
        this.name=name;
        this.sex=sex;
    }
    CreatePerson.prototype.showName=function(){
        console.log(this.name)
    }
    var p1=new CreatePerson('小花','女')
    p1.showName()
    function CreateStar(name,sex,job){ //子类
        CreatePerson.call(this,name,sex); // 继承父类属性
        this.job=job; 
    }
    extend(CreateStar.prototype,CreatePerson.prototype) // 继承方法
    var p2=new CreateStar('周杰伦','男','歌手')
    console.log(p2.showName())
    function extend(obj1,obj2){
    	for(var attr in obj2){
      	obj1[attr]=obj2[attr]
      }
    }
    • 方法：for in （拷贝继承）
    1
    2
    3
    4
    5
    6
    7
    var a={name:'小花'};
    var b={};
    for (var attr in a){
       b[attr]=a[attr]
    }
    b.name='小绿'
    console.log(a.name) // 小花，如果不使用for in做处理，返回小绿（堆栈）