哈哈哈万物皆对象,终于到了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. 使用extract-text-webpack-plugin处理css文件路径问题

    首先看到我们的文件夹目录如下: webpack.config.js //解析分离cssconst ExtractTextPlugin = require('extract-text-webpack-p ...

  2. 【知识强化】第六章 查找 6.3 B树和B+树

    本节课我们来学习本章的第一个难点,就是B树.那么B树它其实是一种数据结构,我们设计出这种数据结构就是为了提高我们的查找效率的,提高我们在磁盘上的查找效率.那么什么是B树呢?了解B树之前,我们先来回忆一 ...

  3. httptesting HTTP(s)接口自动化测试框架

    坐标: https://github.com/HttpTesting/pyhttp # HttpTesting ![PyPI](https://img.shields.io/pypi/v/HttpTe ...

  4. mybatis 自定义查询语句

    通过mybatis插件生成的mapper文件只有基本的增.删.改.查.汇总.但是实际使用场景中,总是有各种需要连表.汇总.分组查询的需求,那我们一般都通过自定义查询语句去实现. 有时候会有表结构更改的 ...

  5. nginx的虚拟主机和反向代理和一些技巧应用

    前言 nginx是什么,一般用来做反向代理,也可以用来放静态htnl等文件..当然代理tcp协议也没啥问题,但做好是别用哈.性能不咋样. 虚拟主机 什么是虚拟主机? 个人理解,比如一台主机装一个ngi ...

  6. java23种设计模式(二)-- 建造者模式和原型模式

    一.建造者模式 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创造不同的表示. 特点: (1).在某些属性没有赋值之前,复杂对象不能作为一个完整的产品使用.比如汽车包括方向盘.车门.发动机 ...

  7. Tomcat 配置错误界面

    Tomcat发生错误时跳转到错误页面 注意 :5.0下操作需要删除掉注释语句,不然报错,原因未知 一.修改 tomcat 的配置文件 修改 tomcat 的配置文件,当页面发生错误时跳转到指定的页面, ...

  8. 对struct typedef *的认识

    typedef struct node { ……… }NODE,*PNODE; 应该等价于 typedef struct node NODE;//struct node = NODE,eg:struc ...

  9. 【串线篇】MVC与SpringMVC

    1.二者区分 MVC: SpringMvc: DispatcherServlet(前端控制器名) 2.springmvc思想 Spring MVC 通过一套 MVC 注解,让 POJO成为处理请求的控 ...

  10. 禁用ubuntu启用虚拟内存swap

    一.不重启电脑,禁用启用swap,立刻生效 # 禁用命令 sudo swapoff -a # 启用命令 sudo swapon -a # 查看交换分区的状态 sudo free -m 二.重新启动电脑 ...