美文网首页
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(面向对象)

    一、理解对象 1. 数据属性 数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行...

  • 扒一扒所谓的面向对象

    面向对象是很多高级程序程序设计语言的核心。面向对象的标志就是类、对象、继承、派生等。js严格意义上来讲并不是面向对...

  • 深入了解javascript(三)——面向对象与原型

    面向对象是js最难弄懂的一部分,我在看了《Javascript高级程序设计》之后还看了李炎恢老师关于面向对象与原型...

  • 6、面向对象的程序设计2(《JS高级》笔记)

    2、原型与in操作符有两种方式使用in操作符:单独使用和在for-in循环中使用。单独使用时,in操作符会在通过对...

  • 023 JS高级

    JS高级 一、函数高级 1、函数回调 2、闭包 二、循环绑定 三、面向对象JS 1、属性与方法 2、类字典结构使用...

  • JS高级编程笔记 1-5章

    JS高级教程 1.探讨了JS面向对象程序设计和继承的方式,以及如何在HTML等标记语言中使用它。在深入剖析了事件和...

  • JS的面向对象编程设计

    最近阅读了《JS高级程序设计3》,刚看完第六章面向对象,于是将大体的核心概念整理总结一下。 1.理解对象 属性类型...

  • 第7天,面向对象

    @(python)[笔记] 目录 前言 在python中,一切皆对象面向对象的程序设计的核心就是对象;面向对象的程...

  • 第十二天学习Java(面向对象)

    2、2面向对象和面向过程 面向对象(OOP) 不是一种语言,而是一种思想 面向对象程序设计:(Object Ori...

  • 面向对象(一)

    面向对象(二)面向对象(三) 这部分内容出自于《JavaScript高级程序设计》,共三篇。 ECMA-262把对...

网友评论

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

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