读书笔记《javascript面向对象编程指南》

第一章

◆对象
事物在程序设计语言中的表现形式．
◆类
一切基于对象，依靠一套原型系统（prototype)，我将现有的 Person 对象扩展成了一个叫做Bob的新对象
◆封装
阐述对象中所包含的内容
1.信息隐藏
2.方法与属性的可见性.
◆聚合
现有对象合并成一个新对象的过程(分解问题便于解决)
◆继承
◆多态
不同对象通过相同的方法调用来实现各自行为的能力.

第二章

◆变量
1.声明变量
2.初始化变量
tips 区分大小写
◆操作符
±*/% ++ –
后置时先返回再递增减
◆基本数据类型
◇基本类型
1.数字
2.字符串
3.布尔值
4.undefined
5.null
◇非基本类型
对象
◆数组

第三章 函数

什么是函数

◇定义和使用

• 本质上是一种代码的分组形式
  1.function 子句
  2.函数名称
  3.函数所需的参数
  4.函数所要执行的代码块 称之为函数体
  5.return 子句 默认返回值为undefined
• 函数名后面加一对用以传参数的括号即可调用

◇向函数传递参数

• 忘记传参,js引擎会自动设定为NaN
• 内建的 arguments数组

function sum (){
    	var i, result = 0;
    	var number_of_params = arguments.length;
    		for (i=0;i<number_of_params;i++){
        result += arguments[i]
    }
    return result
}

◇预定义函数

• parseInt (sth,radix) 返回整数类型输出,失败返回NaN
  手动提供radix 不然容易出问题 譬如日历
• parseFloat ()
• isNaN ()
• isFinite ()
• encodeURI ()
• decodeURI ()
• encodeURIComponent ()
• decodeURIComponent ()
• eval ()
• alert() 由浏览器提供 但会阻塞当前的浏览器线程

◇变量作用域

!尽量将全局变量的数量降到最低
!总是使用var语句来声明变量
!函数域始终优先于全局域

◇理解函数也是数据的概念,并将其视为一种特殊的数据类型

B

◇匿名函数的调用

◇回调函数

◇自调函数

• 不会产生全局变量
  -适合一次性或者初始化的任务

◇内嵌函数

• 确保全局名字空间的纯洁性
• 私有性

◇以函数为返回值的函数

◇能重定义自身的函数

◇闭包

第四章 对象

数组到对象

1.表示对象的变量名
2.{}
3.逗号分割的是组成该对象的元素(属性)
4.键/值对之间用冒号分割

◇元素 属性 方法
◇哈希表 关联性数组
◇访问对象属性
◇调用对象方法
◇修改属性与方法
◇使用this值
◇构造器函数
◇全局对象
◇构造器属性
◇ instanceof
◇返回对象的函数
◇传递对象
◇对象比较

内建对象

1.数据封装类对象 Object Array Boolean Number String
2.工具内对象 Math Date RegExp
3.错误类对象

◆Object
toString() valueOf()
◆Array
sort() join() slice() pop() push() splice()
◆Function
call() apply()
arguments callee()
◆Boolean
◆Number
◆String
◆Math
◆Date
◆RegExp test() exec()

Error 对象

try() {
}
catch(e){
} finally{
}

小结

◆ 对象与数组很类似,但允许我们指定键值
◆对象通常都会拥有若干个属性
◆其中有些属性可以当做函数使用 即方法(函数本身也是数据)
◆数组本身也可以看做拥有一系列数字属性,并外加一个length属性的对象
◆Array对象中有着一系列非常有用的方法 sort() join()
◆函数也是一种对象,它们本身也有属性和方法

第五章 原型

属性

js中 对象都是通过传引用的方式来传递的,因此我们所创建的每个新对象实体中并没有一份属于自己原型副本.我们可以随时修改原型,并且与之相关的对象也会继承这一改变(甚至可能会影响再修改之前就已经创建了的对象)

==每个对象都会有一个构造器,而原型本身也是一个对象,这意味着它也必须有一个构造器,而这个构造器又会有自己的原型 ,这个结构持续下去并最终取决于原型链的长度(prototype chain)的长度,最后一环肯定是Object内建对象.
◆对象自身属性的优先级高于原型属性

◆枚举属性

1.并不是所有的属性都会再for-in循环中显示.例如(数组的)length属性和constructor属性就不会被显示.那些已经被显示的属性被称为是可枚举的,我可以通过各个对象所提供的propertyIsEnumerable()方法来判断其中又那些可枚举的属性
2.原型链中的各个原型属性也会被显示出来,当然前提是它们是可枚举的.我们可以通过对象的hasOwnProperty()方法来判断一个属性石对象自身属性还是原型属性
3.对于所有的原型属性,propertyIs()都会返回false,包括哪些再for-in循环中可枚举的属性.
4.对于内建属性和方法来说,它们大部分都是不可枚举的,任何来自原型链中的属性也是不可枚举的,如果propertyIsEnumerable()的调用时来自原型链上的某个对象,那么该对象中的属性是可枚举的.

扩展内建对象

◆当我们对原型对象执行完全体缓释,可能会触发原型链中每种异常(exception)
◆prototype.constructor属性是不可靠的
◆重写某对象的prototype时,需重置相应的constructor属性

小结

◆js中,所有函数都会拥有一个叫做prototype属性,默认初始值为空对象.
◆可以再相关的原型对象中添加新的方法和属性,甚至可以用自定义对象来完全替换掉原有的原型对象
◆当我们通过某个构造器函数来新建对象时(使用new操作符),这些对象就会自动拥有一个指向各自prototype属性的神秘链接,并且可以通过它来访问相关原型对象的属性.
◆对象自身属性的优先级要高于其原型对象中的同名属性.
◆可以通过hasOwnPrototype()方法来区分对象自身属性和原型属性.
◆原型链的存在:如果我们再一个对象foo中访问一个并不存在的属性bar,即当我们访问foo.bar时,js引擎会搜索该对象的原型的bar属性.如果依然没有找到bar属性,则会继续搜索其原型的原型,以此内退,直到最高级的父级对象Objec
◆可以对内建的构造器函数进行扩展,以便所有的对象都能引用我们添加的功能.不过在添加相关的属性和方法之前,应该做一些对已有方法的检测工作.

第六章 –

原型链

◆不要单独为继承关系创建新对象
◆尽量减少运行时方法搜索,例如 toString()

第七章 浏览器环境

BOM

window.navigator

◆window.navigator.userAgent
◆ 特性监听法 优于用户代理检测法

widnow.location

• reload()
• replace(‘href’)历史记录不会留下记录
• assign(‘href’)

window.history

• back()
• forward()
• go()

window.frames

window.screen

window.open()/close()

window.moveTo()/moveBy() window.resizeTo()

window.alert() window.prompt() window.confirm()

window.setTimeout() window.setInterval()

DOM

• document.documentElement.nodeType = 1
• document.documentElement.nodeName = ‘HTML’
• document.documentElement.hasChildNodes()
• .hasAttributes()
• .getAttribute(‘class’)
• .textContent
  ◆getElementsByTagName()
  ◆getElementsByName()
  ◆getElementById()
• .nextSibling
• .previousSibling
• .firstChild/lastChild

修改

CSS -短线 下一个字母大写

新建

• creatElement()
• creatTextNode()
• cloneNode(true/false) 深拷贝/浅拷贝
• insertBefore() document.body.insertBefore(document.createTextNode(‘boo’),document.bodey.firstChild);

移除

• removeChild() var removed = document.bodey.removeChild(myp)
• replaceChild()

• Cookies Tittle Referrer Domain

事件

内嵌HTML属性法

<div onclick = "alert('Oh')">click</div>

元素属性法

<div id = "my-div">click</div>;
<script type="text/javascript">;
var myelement  = document.getElementById('my-div');
myelement.onclick = function(){
	alert('Ouch!');
	alert('And double Ouch!');
	}
</script>

DOM的事件监听器

• addEventListener(‘click’,function(){},false)

捕捉法与冒泡法

阻断传播

• removeEventListener(‘click’,paraHandler,false)

防止默认行为

for (var i = 0;i<all_links.length;i++){
    all_links[i].addEventListener(
        'click',
        function(e){
            if (!confirm('Are you sure you want to follow this link?')){
                e.preventDefault();
            }
        },
        false);
}

事件类型

◆鼠标的松开、按下、单击、双击.
◆鼠标的悬停、移出、拖动.
◆键盘的按下、输入、松开.
◆载入、卸载、卸载之前.
◆中止、错误、
◆大小重置、滚动条、上下文菜单(右键菜单应用)
◆表单类事件 获得焦点、失去焦点.
◆改变、选中.
◆重置、提交.

XMLHttpRequest对象

发送请求

处理响应

• xhr.readyState 0/1/2/3/4
• xhr.status 200

A

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = (function(myxhr){
	return function(){myCallback(myxhr);}
	})(xhr);
xhr.open('GET','somefile.txt',true);
xhr.send('');

小结

◆全局对象window的系列属性,例如navigator、location、history、frames、screen及其方法 setInterval()和setTimeout();alert()、confirm()、prompt();moveTo/By()和resizeTo/By()
◆ DOM
1.通过parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling带有父子关联性的属性来访问.
2.通过getElementById()、getElementsByTagName()、getElementsByName()来访问
3.节点修改
通过innerHTML或innerText/textContent属性来进行
通过nodeValue或setAttribute()以及对象属性中的相关属性来进行.
通过removeChild()、cloneNode()、insertBefore()等方法来添加新节点
◆XMLHttpRequest
首先,向服务器发送HTTP请求,以获得相关数据
然后,处理服务器的相应信息,并更新页面中的相关部分.

第八章 编程模式与设计模式

编程模式

行为隔离

◆内容
1.尽量避免在HTML标签中使用样式类的属性
2.不用使用与外观有关的HTML标签
3.尽量根据语义需要来选择标签,而不是去考虑浏览器会如何绘制它们.
◆行为
1.尽可能少用

命名空间

初始化分支

延迟定义

配置对象

私有变量和方法

特权方法

私有函数的共有话

自执行的方法

链式调用

JSON

设计模式

单件模式

工厂模式

装饰器模式

观察者模式