JavaScript面向对象编程指南（第2版）》读书笔记
一、对象
1.1 获取属性值的方式
water = {
down: false
}
console.log(water.down) // false
console.log(water['down']) // false
1.2 获取动态生成的属性的值
var type = 'down'
console.log(water[type]) // false
二、数组
2.1 检测是否为数组
typeof([1,2]) // object
Array.isArray([1,2]) // true
Object.prototype.toString.call([1,2]) // [object Array]
Array.isArray(Array.prototype) // true
Object.prototype.toString.call(Array.prototype) // [object Array]
2.2 增加数组长度导致未赋值的位置为undefined
减少数组长度则会裁去多余的值。
var x = [1,2];
x.length = 7;
console.log(x); // [1, 2, undefined × 5]
x.length = 1;
console.log(x); // [1]
2.3 用闭包实现简易迭代器
var next = setup([3,3,9]);
function setup(x){
var i = 0;
return function(){
console.log(x[i++]);
}
}
next(); // 3
next(); // 3
next(); // 9
next(); // undefined
三、作用域
3.1 函数作用域（局部变量）
不能在函数体外直接访问函数内变量。
function water() {
var direction = 'down'
}
console.log(direction) // Uncaught ReferenceError: direction is not defined
3.2 不存在块级作用域
for、if等代码块中的变量不是局部变量。
if(water){
var down = true
}
console.log(down) // true
3.3 变量泄露
函数体内的变量未声明，会在函数第一次执行的时候泄露成全局变量。
function water() {
direction = 'down'
}
water() // 执行函数
console.log(direction) // down
3.4 变量提升
已声明的变量名会提升至顶部，值不会提升。
var down = true
function water() {
// 变量提升覆盖了外部down，由于值没有提升，所以为undefined
console.log(down) // undefined
var down = false // false
console.log(down)
}
water()
3.5 临时作用域
call和apply借用另一个对象的方法，提高代码复用
第一个参数为this的指向，第二个参数为传入的参数，apply传入数组
构造函数不使用new this的值会指向window
四、闭包
4.1 操作闭包中的值
var nature = (function() {
var water = {}
water.down = false
water.get = function(type) {
return water[type]
}
water.set = function(type,val) {
water[type] = val
return typeof(val) === 'boolean' ? true : false
}
return {
getWater: water.get,
setWater: water.set
}
})()
console.log(nature.getWater('down')) // false
console.log(nature.setWater('down',true)) // true
五、事件监听
var event = {
add: function ( dom,type,func ) {
if(window.addEventListener){
dom.addEventListener( type,func,false )
}
// 兼容IE9以下
else if(document.attachEvent) {
dom.attachEvent('on' + type,func)
}
else {
dom['on' + type] = func
}
},
del: function ( dom,type,func ) {
if(window.addEventListener){
dom.removeEventListener( type,func,false )
}
else if(document.attachEvent) {
dom.detachEvent('on' + type,func)
}
else {
dom['on' + type] = null
}
}
}
var f = function(){
console.log('event received')
}
event.add(document.body,'click',f)
event.del(document.body,'click',f)
六、类型检测
6.1 常用类型
typeof(1) // "number"
number/boolean/string/undefined/object/function
6.2 继承检测
function Water (name,status) {
this.name = name
this.status = status
}
var seaWater = new Water('sea','warm')
seaWater instanceof Water // true
6.3 NaN和isFinite检测
NaN不等于NaN，检测需要使用isNaN函数。
NaN === NaN // false
isNaN(NaN) // true七、类型转换
7.1 转为整形
parseInt和parseFloat碰到第一个异常字符就会终止。
console.log(parseInt(66.5t)) // 66.5
console.log(parseInt(t66.5t)) // NaN
7.2 null和undefined
数值超出范围则显示Infinity。
console.log(1*undefined) // NaN
console.log(1*null) // 0
八、URL编码
8.1 编码
var src = "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURI = encodeURI(src) // "http://www.cnblogs.com/bergwhite/p/6657943.html"
var srcURICom = encodeURIComponent(src) // "http%3A%2F%2Fwww.cnblogs.com%2Fbergwhite%2Fp%2F6657943.html"
8.2 解码
decodeURI(srcURI) // "http://www.cnblogs.com/bergwhite/p/6657943.html"
decodeURIComponent(srcURI) // "http://www.cnblogs.com/bergwhite/p/6657943.html"
九、JSON格式
9.1 转为JSON格式
var water = {
down: false
}
var waterJSON = JSON.stringify(water) // "{"down":false}"
9.2 转为对象
JSON.parse(waterJSON) // Object {down: false}
十、兼容性问题
parseInt(09) // ES5中默认不转换八进制，ES3会默认作为八进制
parseInt(09,10) // 当值为日期的时候，作为十进制处理
感谢大家的阅读。
一、基本类型
1.1 字符串
判断是否包含某个字符串
indexOf方法中，找到相关字符串会返回第一次出现的下标。没有找到就会返回-1，利用这个特性可以判断字符串是否存在。
console.log('Fine'.indexOf('in') !== -1) // true
把字符串按照一定规则分离成数组
下面是以空格为分割标志。
console.log('I seek you'.split(' ')) // ["I", "seek", "you"]
复制指定位置的字符串
传入的两个参数分别是开始的位置和结束的标记。看清楚，第二个参数本身的小标所表示的内容不会被复制，第二个参数是用来标记，这里是结束位置。
console.log('I seek you'.slice(2,6)) // seek
console.log('I seek you'.substring(2,6)) // seek
拼接字符串
console.log('I seek you'.concat(' too.')) // I seek you too.
查看字符串中的字符
console.log('I seek you'[0]) // I
console.log('I seek you'.charAt(0)) // I
1.2 对象
判断属性是自己的还是继承来的
使用in不能判断属性是自己的还是继承来的，使用hasOwnProperty可以。
var xiaoming = {
name: 'xiaoming'
}
使用in不能判断属性是自己的还是继承来的
---------------------------------
'name' in xiaoming // true
'toString' in xiaoming // true
---------------------------------
xiaoming.hasOwnProperty('name') // true
xiaoming.hasOwnProperty('toString') // false
判断对象是否可枚举
xiaoming.propertyIsEnumerable() // false
判断对象是另一个对象的原型
var People = function (name) {
this.name = name
}
var xiaoming = new People('xiaoming')
Human.prototype = monkey
monkey.isPrototypeOf(man)
1.3 原型
- __proto__是实例对象的属性
- prototype是构造函数的属性
- constructor指向构造函数
IE中不存在__proto__，推荐使用ES5的Object.getPropertyOf()访问。
typeof [].__proto__ // "object"
Object.getPrototypeOf([]) // [constructor: function, toString: function, toLocaleString: function, join: function, pop: function…]
[].constructor.prototype
原型继承
var People = function (name,age) {
this.name = name
this.age = age
}
xiaoming = People.prototype
xiaoming.constructor = xiaoming
1.4 常用数学方法
Math.PI // 3.141592653589793
Math.SQRT2 // 1.4142135623730951
Math.sqrt(2) // 1.4142135623730951
Math.E // 2.718281828459045
Math.pow(2,3) // 8
Math.random() * (10-2)+2 // 7.564475903879611 | 2-8之间的平均数
Math.LN2 // 0.6931471805599453
Math.floor(2.6) // 2 | 指定值的最小整数
Math.ceil(2.6) // 3 | 指定值最大整数
Math.round(2.6) // 3 | 去最靠近指定值的整数
Math.max() // 3
Math.min() // 2
Math.sin(90) // 0.8939966636005579
Math.cos(90) // -0.4480736161291702
二、DOM操作
2.1 节点编号、名称以及值
nodeType有12种，具体请见MDN
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
you.nodeType // 1
you.nodeName // BIV
you.nodeValue // null
you.textContent // HELLO YOU
you.innerText // "HELLO YOU"
2.2 父节点、子节点和相邻节点
检查是否具有某个子节点
document.documentElement.hasChildNodes('body') // true
查看所有子节点
document.documentElement.childNodes // [head, text, body]
查看第一个子节点
document.documentElement.firstChild // <head>...</head>
访问父节点
document.documentElement.childNodes[0].parentNode
访问相邻节点
document.documentElement.children[0].previousSibling // null
document.documentElement.children[0].nextSibling // #text
2.3 添加和删除节点
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
新建节点
var pTag = document.createElement('p')
var pVal = document.createTextNode('HELLO YOU')
pTag.appendChild(pVal) // <p>HELLO YOU</p>
添加节点
document.body.insertBefore(pTag,you)
document.body.replaceChild(you,pTag)
删除节点
document.body.removeChild(you)
克隆节点
true为深拷贝，会拷贝节点的内容。flase只拷贝空标签。
var newNodeFalse = document.body.cloneNode(true)
var newNodeFalse = document.body.cloneNode(false)
console.log(newNodeFalse) // <body>...</body>
console.log(newNodeFalse) // <body></body>
2.4 属性相关
<div class="you">HELLO YOU</div>
var you = document.getElementsByClassName('you')[0]
检查是否具有某个属性
you.hasAttributes('class') // true
获取具体属性
you.getAttribute('class') // "you"
you.attributes[0].nodeValue // "you"
you.attributes['class'].nodeValue // "you"
选择器
querySelector使用的是CSS选择器，返回单个节点。返回所有匹配的结果用querySelectorAll。
document.querySelector('.you')
document.querySelectorAll('.you') // [div.you]
批量添加样式
you.style.cssText = "color:red;font-size:200px;"
2.5 DOM合集
document.images
document.applets
document.links
document.anchors
document.forms
document.cookie
document.title
document.referrer
document.domain
2.6 DOM遍历
function walkDOM(n){
do {
console.log(n)
if(n.hasChildNodes()){
walkDOM(n.firstChild)
}
}
while (n=n.nextSibling)
}
walkDOM(document.body)
三、其他
3.1 事件
阻止冒泡
event.stopPropagation()
window.event.cancelBubble = true //IE
阻止默认事件
event.preventDefault()
return false // IE
拖动事件
触屏事件
这里有一个用canva实现的画图页面，触屏画图，实现过程可以直接看源码。。另外触屏事件的分析，请见伯乐在线。
touchstart
touchmove
touchend
touchleave
touchcancel
3.2 浏览器检测
用户代理可以被模拟，所以根据浏览器的不同特征来检测当前浏览器类型更加可靠。
if(window.addEventlistener) {
// code...
}
else if(){
// code...
}
3.3 三种弹窗方式
三种弹窗分别是提示框（alert），确认框（confirm）和交互框（prompt）。可以把确认和交互赋值给变量，变量会存储相应结果。
alert('Welcome To JS!')
var isLike = confirm('Do you like JS?')
var whyLike = prompt('Why do you like it.')
console.log(isLike) // true
console.log(whyLike) // Maybe...
3.4 根据浏览器历史控制前进后退
根据缓存的浏览器历史，可以控制前进、后退和跳转到指定历史记录。
window.history.forward() // 前进
window.history.back() // 后退
window.history.go(1) // 跳转
3.5 重载页面的六种方式
location.reload()
location.assign('/')
location.replace('/')
window.location.href = '/'
location = location
window.location.reload()
3.6 修改当前页面URL但是不刷新页面
history.pushState({a:1},'','hello')
3.7 URI编码
function decodeURI(url,params){
var url = url || 'http://www.cnblogs.com/bergwhite/'
var params = params || {name: 'berg', age: 22}
var query = []
for (param in params) {
query.push(param+'='+params[param])
}
return url+=query.join('&')
}
decodeURI() // "http://www.cnblogs.com/bergwhite/name=berg&age=22"
decodeURI('http://www.you.com/',{a:1,b:2}) // "http://www.you.com/a=1&b=2"
3.8 窗口相关
新窗口打开内容
window.open('http://www.baidu.com','zzzzzzzzzzzz','width=800px,height=300px,resizable=yes')
判断是否是高分辨率屏幕
window.devicePixelRatio // 1
感谢您的阅读。
