• 第九课:js的类与继承


    因为本书是js的框架设计,因此观看本书的必须有js基础,看不懂,请不要觉得自己差。我也是看了5遍js高级程序设计,才能看懂这本书的。

    有关js的构造函数,继承的方法大家可以去看js的高级程序设计,我这里只讲一个大家比较容易弄错的问题:

    function A(){}

    A.prototype = {  aa:1   }

    var a = new A();

    A.prototype = {  aa:2  }

    console.log(  a.aa  )         

    大家会认为,会打印出2.因为构造函数A的原型改变了,当访问实例对象时,如果实例对象没有的属性,就去访问它的原型属性,所以应该是2.

    但是结果却是1.为什么会这样呢?

    大家要看下在改变A.prototype时,a实例已经new出来了。所以就不能按正常的方式来理解了(如果new出来的实例是在改变A原型之后,那么肯定就是2了。)

    其实每当我们new出一个对象的时候,js都会默认设置这个对象一个内部属性[[Prototype]](现在的浏览器可以通过实例对象的_proto_属性访问),它指向的是new时的原型对象。

    因此,a._proto_指向的是{  aa:1   }  ,当你在new它后面改变A.prototype = {  aa:2  },不会对a的_proto_属性有任何影响,因此打印出来的是1.之后,如果你再new A方法,那么,打印出来的aa就是2了。

    还有一个比较重要的问题:

    大家可以去打印一下a.constructor,打印出来的是Object,为什么不是A呢?

    问题就出在这里:A.prototype = {  aa:1   }。当你新建一个A构造方法的时候,js会默认生成A.prototype对象(对象有一个constructor属性指向A)。但是你在它下面马上改变了它的原型:A.prototype = {  aa:1   }。这时,A.prototype对象的constructor会默认为Object。所以,你必须A.prototype = {  aa:1, constructor:A   },把constructor的指向恢复为A。 (大家要区分下这两种方式:A.prototype = {  aa:1   },A.prototype.aa =1.第一种方式,是重新定义A.prototype对象,会覆盖之前对A.prototype对象的赋值。第二种方式,是添加属性,不会覆盖之前的定义,因此也不会改变constructor的指向)

    面试官经常会问的问题:new操作发生了什么事?

    (1)创建一个空对象instance。(2)instance._proto_ = instanceClass.prototype。(3)将构造函数里面的this=instance。(4)执行构造函数里面的代码。(5)判定有没有返回值,没有返回值默认为undefined。最后判断返回值的类型,如果为复合数据类型(数组,函数,对象,正则对象,日期对象),则直接返回,如果不是就返回this(instance)。

    一些继承库里面的不常见方法和技巧介绍:

    /xyz/.test(function(){  xyz;  }) ? /_super/ : /.*/;

    "."   ->   匹配除“ ”之外的任何单个字符。若要匹配包括“ ”在内的任意字符,请使用诸如“[sS]”之类的模式。

    ""  ->  匹配一个字的边界,即字与空格间的位置。例如,“er”匹配“never”中的“er”,但不匹配“verb”中的“er”。

    因此上面的/_super/正则,只匹配_super,而.*_super.*,都不会匹配。

    /.*/匹配除了“ ”之外的任何字符。

    一般情况下,Function.prototype.toString 会显示函数里面的字符串,比如:function(){  xyz;  },会显示成"function(){  xyz;  }",这时通过/xyz/.test会返回真。但是safari,mobile opera等浏览器无法显示。

    所以上面的代码的意思:当函数里面的内容可以显示时,test就会返回真,然后就返回可以判断函数里面是否有_super属性的正则表达式,否则就返回一个不管判断什么字符都返回true的正则表达式.

    这个方法一般在继承中使用,比如,子类继承父类,子类在添加方法时,会先检查之前是否已经有了此方法名,如果有,会先判断此方法是否是父类的,这时就可以通过判断函数里面是否存在_super的字样,如果有,就证明是父类的,就需要重写。没有的话,就说明是子类之前已经添加的,就不需要添加了。

    "<",">"操作

    var a = {

      valueOf:function(){return 1}

    };

    var b = {

      valueOf:function(){return 2}

    };

    a < b;  //true

    "<",">"操作,强制计算前后对象的值,然后比较大小,对象会先调用自身的valueOf方法,也就是调用a,b对象的valueOf方法。

    callee,caller的区别

    callee是arguments对象的一个属性,它指向的是当前函数。比如:function a(){  arguments.callee  ->a  }。

    caller是调用函数的函数,比如:function a (){}  function b(){  a();  },b()。当调用b时,b里面会调用a.这时a.caller指的就是b。如果函数是由顶层调用的,那么 caller 包含的就是 null。不过这个属性已经在es5中被废弃的,所以面试官如果问这个,我会觉得面试官在显摆。

    司徒正美的这本书在讲数据属性和访问器属性时,讲的没有js高级程序设计的好,建议大家去看js高级程序设计里面的那一章。讲的是一些Object.defineProperty,Object.freeze等es5的东西,它能够操作js对象里面的内部属性,当然低版本IE浏览器是不支持的。所以一般用的比较少,除了一些简单的可以用低版本IE模拟的功能(Object.defineProperty)才会使用到,其他功能用的非常非常少。了解就好。

    加油!

  • 相关阅读:
    IOS5,6,7不同版的适配. 强制旋转和自动旋转.
    第3条:多用字面量语法,少用与之等价的方法
    UIViewAnimation警告
    ViewController的生命周期分析和使用
    Chrome浏览器下调试SASS
    Reactjs相比较原生方案是绝对的快吗?哪些情况下React有优势
    js收集的一些好的题型
    js异步加载 defer和async 比较
    前端知识点
    H5下拉刷新特效demo,动画流畅
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4136999.html
Copyright © 2020-2023  润新知