哈哈哈万物皆对象,终于到了js的面向对象篇。

一、属性类型

(1)数据属性

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

  • [[Configurable]]:表示能否通过 delete 删除属性而重新定义属性,默认值是ture
  • [[Enumerable]]:表示能否通过 for-in 循环返回该属性,默认值true
  • [[Writable]]:表示能否通过修改属性的值,默认值true
  • [[Value]]:包含这个属性的数据值,默认值true

要修改默认属性的特性,必须使用ECMAScript的Objedt.defineProperty()方法,这个方法接受三个参数:函数所在对象、属性名字和一个描述对象。例

 var person = {};
Object.defineProperty(person,"name".{
writable:false,
value:"Nicholas"
});
alert(person.name); //Nicholas
person.name = "Greg";
alert(person.name); //Nicholas

(2)访问器属性

访问器属性包括一对getter和setter函数,在读取访问器属性时,会调用getter函数,这个函数负责返回有效值,写入访问器属性的时候,会调用setter函数并传入新值,这个函数决定如何处理数值,访问器属性有如下4个特性

  • [[Configurable]]:能否通过delete删除属性并进行重新定义,默认值时true
  • [[Enumerable]]:表示能否通过for-in循环返回属性,默认值时true
  • [[Get]]:在读取属性时调用的函数,默认值true
  • [[Set]]:在写入属性时调用的函数,默认值true

访问器属性不能直接定义必须使用Obiect.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
}
}
});
var year = 2005;
alert(book.edition); //2

二 创建对象

(1)工厂模式

    function createPerson(name, age, job){
var o = new Object()
o.name = name
o.age = age
o.job = job
o.sayName = function(){
alert(this.name)
}
return o
}
var person = createPerson("Greag", 29, "Software Engineer")
person.sayName()

每次调用这个createPerson()都能返回一个三个属性一个方法的,工厂模式虽然解决了多个相似对象的问题,但却没有解决对象识别的问题,于是新的模式就出现了

(2)构造函数模式

    function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name)
}
}
    var person = new Person("Nic", 22, "Software Engineer")
person.sayName()
 

构造函数虽然好用但并不是没有缺点,就是每个方法都要在实例上创建一遍,因为每定义了一个函数就相当于实例化了一个对象,所以构造函数的定义相当与



function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName =new Function(
"alert(this.name)"

) // 与声明函数在逻辑上是相等的

}
var person1 = new Person("Greg", 22, "Doctor");
var person2 = new Person("Nic", 22, "Software Engineer");

这样就会导致不同的实例上的同名函数是不同的 alert( person1.sayName == person2.sayName)     //false  创建两个完成相同任务的Function完全没有必要,于是又出现了原型模式

(3)原型模式

我们每创建一个函数都会有一个property(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途就是包含可以由特定的类型的所有实例共享的属性和方法,也就是我们不必在构造函数中添加对象的信息,可以直接添加到原型对象上,

    //原型模式
function Person(){}
Person.prototype.name = "Nic"
Person.prototype.age = 22
Person.prototype.sayName = function(){
alert(this.name)
}
var person1 = new Person();
var person2 = new Person();
alert(person1.sayName == person2.sayName) //true

简洁的原型语法

    //简洁的原型语法
function Person(){}
Person.prototype = {
name:"Nic",
age:22,
sayName:function(){
alert(this.name)
}
}

原型模式也不是没有缺点,首先他省略了为构造函数传递初始化参数这一环节,结果所有实例在相同的情况下都取得相同的属性值,原型模式最大的问题就是其共享的本质所导致,对于包含引用属性的来说,问题就很突出。例

function Person(){};
Person.prototype = {
constructor: Person,
name: "nic",
age: 23,
friends: ["Court", "shelby"]
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van")
alert(person1.friends) //Court, shelby, Van
alert(person2.friends) //Court, shelby, Van
alert(person1.friends === person2.friends) //true

我们的初衷往往不是这样,这也是我们很少看见有人直接用原型模式的原因。

(4)组合使用构造函数和原型模式

创建自定义类型最常见的方式就是组合使用构造函数模式和原型模式,构造函数定义实例属性,原型模式定义方法和共享属性,例

    //组合构造函数模式和原型模式
function Person(name, age, job){
this.name = name,
this.age = age,
this.job = job,
this.friends = ["Court", "Shelby"]
}
Person.prototype = {
constructor: Person,
sayName: function(){
alert(this.name)
}
}
var person1 = new Person("Nic", 23, "Software Engineer")
var person2 = new Person("Greg", 22, "Doctor")
person1.friends.push("Van")
alert(person1.friends) //"Court", "Shelby", "Van"
alert(person2.friends) //"Court", "Shelby"
alert(person1.friends === person2.friends) //false
alert(person1.sayName === person2.sayName) //true

Javascript高级程序设计--读书笔记之面向对象(一)的更多相关文章

  1. Javascript高级程序设计--读书笔记之面向对象(二)

    前面讲了面向对象的封装,这章我们就来说一说继承 1.原型链 实现原型链有一种基本模式,其代码大概如下 <script> function SuperType(){ this.propert ...

  2. javascript高级程序设计读书笔记-事件(一)

    读书笔记,写的很乱   事件处理程序   事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别  没有DOM1 同样的事件 DOM0会顶掉html事件   因为他们都是属性  而 ...

  3. javascript高级程序设计读书笔记----面向对象的程序设计

        创建对象   工厂模式 function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = ...

  4. javascript高级程序设计读书笔记

    第2章  在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...

  5. Javascript高级程序设计读书笔记(第六章)

    第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...

  6. 《JavaScript高级程序设计》笔记:面向对象的程序设计(六)

    面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象. 理解对象 创建自定义对象的最简单的方法就是创建一个Object的实例,然后再为它添加属性和方法.例 ...

  7. JavaScript高级程序设计 读书笔记

    第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...

  8. JavaScript高级程序设计-读书笔记(7)

    第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...

  9. JavaScript高级程序设计-读书笔记(2)

    第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age ...

随机推荐

  1. poj1426 Find The Multiple (DFS)

    题目: Find The Multiple Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 41845   Accepted: ...

  2. mysql控制台的一些技巧,显示,输入换行,语法正则等

    注释: 以/**注释内容**/ mysql> /**列出所有的数据库**/ show databases; +--------------------+ | Database | +------ ...

  3. Python的基础类型(int,bool,str):

    Python的基础类型(int,bool,str): 1.int -------> 整形:主要用力进行数字计算 2.string ------>字符串:可以保存少量数据并进行相关的操作 3 ...

  4. Springboot整合Hikari数据库连接池,密码加密

    1.application.yml配置 spring: datasource: jdbcUrl: jdbc:mysql://127.0.0.1:3306/jby?serverTimezone=UTC& ...

  5. LeetCode Linked List Easy 21. Merge Two Sorted Lists

    Description Merge two sorted linked lists and return it as a new list. The new list should be made b ...

  6. 过滤器为JSP文件生成静态页面

    用过滤器为JSP文件生成静态页面,这只是一个简单的实例,客户端浏览器第一次请求JSP页面时,服务器将生成对应的HTML文件,以后访问同一JSP文件,将转为访问生成的HTML文件.一.过滤器 packa ...

  7. vue.config.js配置前端代理

    // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions // 这 ...

  8. anaconda3创建py2环境

    查看conda的py环境conda info -e # 创建一个名为python34的环境,指定Python版本是3.4(创建py27操作一样)conda create -n py34 python= ...

  9. 页面重置样式reset.css

    我把经常用到的一些页面重置样式归类到了一个.css文件中,这样可以减少代码冗余.当然还有其他的很多用处,比如h1~h5的样式全部统一的话,下面写东西很清晰很多. @charset 'utf-8'; h ...

  10. sql的分页

    public static string GetPageSql(string sql, int start, int end)        {            return string.Fo ...