美文网首页
读《JavaScript面向对象编程指南》笔记 上

读《JavaScript面向对象编程指南》笔记 上

作者: 扶搏森 | 来源:发表于2018-01-22 01:57 被阅读0次

    第二章,基本数据类型、数组、循环及条件表达式

    Infinity是一个特殊值,它代表的是超出JavaScript处理范围的数值,但依然还是一个数字

    >>> Infinity
    Infinity
    >>> typeof Infinity
    'number'
    >>> 1e309
    Infinity
    >>> 1e308
    1e+308
    >>> 6/0
    Infinity
    >>> 6%0
    NaN
    >>> typeof NaN
    number
    >>> !!"false"
    true    //还以为是false
    >>> !!undefined
    false  
    

    第三章,函数

    作用域链

    js不存在大括号级的作用域,但它有函数级作用域,也就是说,在函数内定义的变量在函数外是不可见的。if和for中,代码块是可见的。

    词法作用域

    js中,每个函数都有一个自己的词法作用域。也就是说,每个函数在被定义时(而非执行时)都会创建一个自己的作用域

    闭包突破作用域链

    闭包拿到本来不属于自己的东西

    function f(){
        var b="b";
        return function(){
            return b;
        }
    }
    

    这个函数含有一个局部变量b,它在全局空间里是不可见的,通过闭包,把f函数内的b暴露到函数作用域外了

    Getter与Setter

    var getValue,setValue;
    (function(){
        var secret=0;
        getValue=function(){
            return secret;
        };
        setValue=function(){
            secret=v;
        }
    })();
    >>>getValue()
    0
    >>>setValue(123)
    123
    

    编写一个将十六进制转换为颜色的函数,以蓝色为例,#0000FF应被表示成“rgb(0,0,255)”的形式。然后将函数命名为getRGB(),并用以下代码进行测试。var a=getRGB("#00FF00")得到a为rgb(0,255,0)

    var getRGB=function(x){
        var ox1=x.slice(1,3);
        var ox2=x.slice(3,5);
        var ox3=x.slice(5,7);
    
        return 'rgb('+parseInt(ox1,16)+','+parseInt(ox2,16)+','+parseInt(ox3,16)+')';
    }
    var b=getRGB('#00ff00');
    

    第四章,对象

    在Math对象不存在的情况下,创建一个类似的MyMath对象,并为其添加以下方法:

    MyMath.rand(min,max,inclusive)--随即返回min到max区间中的一个数,并且在inclusive为true时为闭区间(这也是默认情况)

    这个时候需要一个随机会变化的数才能做到和Math.rand()一样生成一个随机数,时间戳就是会变化的数

    var MyMath = {};
    MyMath.rand = function(min, max, inclusive) {
        if (inclusive) {
            return (Date.now()) % (max - min + 1) + min;
        }
        return (Date.now()) % (max - min - 1) + min + 1;
    }
    MyMath.rand(10,100,true);
    

    给String原型链上添加reverse反序的方法

    String.prototype.reverse=function(){
        return Array.prototype.reverse.apply(this.split('')).join('');
    }
    console.log("sllsfa".reverse());
    

    第五章,原型

    • 每个函数中都有一个prototype属性,该属性所存储的就是原型对象
    • 对象中存在一个指向相关原型的链接__proto__(私有属性),__proto__prototype不是等价的。__proto__是某个实体对象的属性,而prototype则是属于构造期函数的属性
    var monkey={
        feeds:'bananas',
        breathes:'air'
    }
    function Human(){}
    Human.prototype=monkey;
    var developer=new Human();
    Human.prototype.go=1;
    developer.feeds='pizza';
    developer.hacks='JavaScript';
    >>>typeof developer.__proto__
    'object'
    >>>typeof developer.prototype
    'undefined'
    
    
    • constructor 属性是专门为 function 而设计的,它存在于每一个 function 的prototype 属性中。这个 constructor 保存了指向 function 的一个引用
    function foo(a,b){
        return a*b;
    }
    var l=new foo();
    >>>l.construtor
    >>>ƒ foo(a,b){
            return a*b;
        }
    
    • for in循环会遍历对象上原型链上的方法,但不是所有属性都会被遍历,如数组的length属性和constructor,可枚举的属性才会遍历,通过对象的propertyIsEnumerable()方法判断其中哪些可枚举。
    function Gadget(name,color){
        this.name=name;
        this.color=color;
        this.someMethod=function(){
            return 1;
        }
    }
    Gadget.prototype.price=10;
    Gadget.prototype.rating=3;
    var newtoy=new Gadget('webcam','black');
    for(var prop in newtoy){
        console.log(prop+' = '+newtoy[prop]);
    }
    >>>name = webcam
     color = black
     someMethod = function (){
         return 1;
     }
     price = 10
     rating = 3
    >>>newtoy.hasOwnProperty('name')
    true
    >>>newtoy.hasOwnProperty('price')
    false
    >>>newtoy.propertyIsEnumerable('name')
    true
    >>>newtoy.propertyIsEnumerable('price')
    false
    

    第六章,继承

    // inheritance helper
    function extend(Child, Parent) {
        var F = function() {};
        F.prototype = Parent.prototype;
        Child.prototype = new F();
        Child.prototype.constructor = Child;
        Child.uber = Parent.prototype;
    }
    // define -> augment
    function Shape() {}
    Shape.prototype.name = 'Shape';
    Shape.prototype.toString = function() {
        return this.constructor.uber ?
            this.constructor.uber.toString() + ', ' + this.name :
            this.name;
    };
    // define -> inherit -> augment
    function TwoDShape() {}
    extend(TwoDShape, Shape);
    TwoDShape.prototype.name = '2D shape';
    // define
    function Triangle(side, height) {
        this.side = side;
        this.height = height;
    }
    // inherit
    extend(Triangle, TwoDShape);
    // augment
    Triangle.prototype.name = 'Triangle';
    Triangle.prototype.getArea = function() {
        return this.side * this.height / 2;
    };
    var triangle=new Triangle(5,10);
    triangle.toString();
    

    Triangle继承TwoDShapeTwoDShape继承Shapenew 出来一个Triangle的实例,调用Triangle上的toString方法,发现没有,就看父级是不是有,直到找不到为止。

    extend函数中设置Child.uber = Parent.prototype,uber属性设置成了指向其父级原型的引用,和es6类中constructor中super一样调用父级的方法。this.constructor.uber指向当前对象父级原型的引用。
    因而,当调用Triangle实体的toString方法时,其原型链上所有的toString都会被调用。

    相关文章

      网友评论

          本文标题:读《JavaScript面向对象编程指南》笔记 上

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