美文网首页
js高级程序设计笔记2(面向对象)

js高级程序设计笔记2(面向对象)

作者: Looog | 来源:发表于2016-11-23 15:54 被阅读27次

    一、理解对象

    1. 数据属性

    数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。

    • [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
    • [[Enumerable]]:表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
    • [[Writable]]:表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的这个特性默认值为 true。
    • [[Value]]:包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为 undefined。
    var person = {};
    Object.defineProperty(person, "name",
     {writable: false,value: "Nicholas"});
    alert(person.name); //"Nicholas"
    person.name = "Greg";
    alert(person.name); //"Nicholas"  ```
    注意:把 configurable 设置为 false,表示不能从对象中删除属性。如果对这个属性调用 delete,则在非严格模式下什么也不会发生,而在严格模式下会导致错误。而且,一旦把属性定义为不可配置的,就不能再把它变回可配置了。此时,再调用 Object.defineProperty()方法修改除 writable 之外的特性,都会导致错误 
    
    ##2、访问器属性 
    -  [[Configurable]]:表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true。
    -  [[Enumerable]]:表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为 true。
    -  [[Get]]:在读取属性时调用的函数。默认值为 undefined。 [[Set]]:在写入属性时调用的函数。默认值为 undefined。 
    ```
    //访问器属性不能直接定义,必须使用 Object.defineProperty()来定义。
    var book = {_year: 2004,edition: 1};
    Object.defineProperty(book, "year", {
            get: function(){return this._year;},
            set: function(newValue){
                if (newValue > 2004) {
                        this._year = newValue;this.edition += newValue - 2004;
                }
            }
    });
    book.year = 2005;
    alert(book.edition); //2 ```
    ######注意:不一定非要同时指定 getter 和 setter。只指定 getter 意味着属性是不能写,尝试写入属性会被忽略。在严格模式下,尝试写入只指定了 getter 函数的属性会抛出错误。类似地,只指定 setter 函数的属性也不能读,否则在非严格模式下会返回 undefined,而在严格模式下会抛出错误。 
    
    #二、原型
    ```
    //组合使用构造函数模式和原型模式 
    function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.friends = ["Shelby", "Court"];
    }
    Person.prototype = {
            constructor : Person,
            sayName : function(){
                alert(this.name);
            }
    }
    var person1 = new Person("Nicholas", 29, "Software Engineer");
    var person2 = new Person("Greg", 27,"Doctor");
    person1.friends.push("Van");
    alert(person1.friends); //"Shelby,Count,Van"
    alert(person2.friends); //"Shelby,Count"
    alert(person1.friends === person2.friends); //false
    alert(person1.sayName === person2.sayName); //true ```
    
    #三、继承
    ###1、原型链 
    ```
    function SuperType(){
        this.property = true;
    } 
    SuperType.prototype.getSuperValue = function(){
        return this.property;
    };
    function SubType(){
        this.subproperty = false;
    }
    //继承了 SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function (){
        return this.subproperty;
    };
    var instance = new SubType();
    alert(instance.getSuperValue()); //true ```
    
    
    ![构造函数和原型之间的关系 ](https://img.haomeiwen.com/i2572649/18f9ce923ba6c63d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ```
    //继承了 SuperType
    SubType.prototype = new SuperType();
    //使用字面量添加新方法,会导致上一行代码无效
    SubType.prototype = {
        getSubValue : function (){
        return this.subproperty;
        },
        someOtherMethod : function (){
            return false;
        }
    }; ```
    
    ###2、借用构造函数 (很少单独使用)
    ```
    function SuperType(){
        this.colors = ["red", "blue", "green"];
    }
    function SubType(){
        //继承了 SuperType
        SuperType.call(this);//或者:SuperType.apply(this)
    }
    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    var instance2 = new SubType();
    alert(instance2.colors); //"red,blue,green" ```
    ###3、寄生组合式继承 
    ```
    function SuperType(name){
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function(){
        alert(this.name);
    };
    function SubType(name, age){
        SuperType.call(this, name); //第二次调用 SuperType()
        this.age = age;
    }
    SubType.prototype = new SuperType(); //第一次调用 
    SuperType()SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        alert(this.age);
    } ```
    

    相关文章

      网友评论

          本文标题:js高级程序设计笔记2(面向对象)

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