JavaScript面向对象编程指南(第2版)【读书笔记】

文章目录

• • • • 第一章 面向对象的JavaScript
      • 第二章 基本数据类型、数组、循环及条件表达式
      • 第三章 函数
      • • • encodeURI和encodeURIComponent的区别；
      • 第四章 对象
      • • • 获取时间戳的方式
          • 构造函数默认返回this,如果return的值为引用类型则返回该引用
          • 多维数组排序，会取嵌套数组中的第一个数组元素来排序
      • 第五章 原型
      • 第六章 继承
      • 第七章 浏览器环境
      • 第八章 编程模式与设计模式
      • 附录A 保留字
      • 附录B 内建函数
      • 附录C 内建对象
      • 附录D 正则表达式

最近收拾的时候看到自己买的一堆书，很多只看了一半，就想着重读一下，做个简单的笔记。其实我认为学习，无论是看书还是学一门新的语言都需要至少需要做一个简单的笔记和小练习，这样才会有更好的收获，也更方便自己温故而知新。 这篇主要记录一下书中自己平时不注意的细节和总结。

第一章 面向对象的JavaScript

第二章 基本数据类型、数组、循环及条件表达式

第三章 函数

encodeURI和encodeURIComponent的区别；

• encodeURI会返回一个可用URL，会编译除了字母数字和一些特殊符号之外的其他字符：比如汉字和空格，
• encoencodeURIComponent会编译除了字符串和数字的其他字符。

第四章 对象

获取时间戳的方式

+ new Date();	//"+" DateObject
new Date().getTime(); //DateObject.getTime()
Date.parese('Jan 11,2019');//Date.parse(String || DateObject)

构造函数默认返回this,如果return的值为引用类型则返回该引用

function C(){
	this.a = 1;
	return false;//输出{a:1}
	return {a:2};//输出{a:2}
	return [1,2];//输出[1,2]
}
console.log(new C());

多维数组排序，会取嵌套数组中的第一个数组元素来排序

let C = [1,2,[1,2]];
C.sort();//[1,[1,2],2]
//同理
c.join('--');//"1--1,2--2"

第五章 原型

第六章 继承

第七章 浏览器环境

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

1.看到一个骚操作，函数改写自身

//MYAPP.myevent.addListener用来给元素添加监听，需要处理不同浏览器的兼容性。
//第一次调用的时候就改写自身，之后就不需要再做其他判断
var MYAPP = {}; 
MYAPP.myevent = { 
	 addListener: function(el, type, fn){ 
		 if (el.addEventListener) { 
			 MYAPP.myevent.addListener = function(el, type, fn) { 
			 	el.addEventListener(type, fn, false); 
			 }; 
		 } else if (el.attachEvent){ 
			 MYAPP.myevent.addListener = function(el, type, fn) { 
				 el.attachEvent('on' + type, fn); 
			 }; 
		 } else { 
			 MYAPP.myevent.addListener = function(el, type, fn) { 
				 el['on' + type] = fn; 
			 }; 
		 } 
		 MYAPP.myevent.addListener(el, type, fn); 
	 } 
}; 

2.对于函数形参可变，或者形参比较多的情况，函数参数可以放在一个对象中，还可以给函数设置默认值

//conf设置默认值可以没有传参时，直接取conf属性会报错的问题，
//使用对象作为属性可以减少参数的数量和复杂性，并且对象的属性数量是可变的,当函数需要新增参数的时候加到conf中就可以了
function addButton(text,conf={}){
	var type = conf.type || 'submit';
	var font = conf.font || 'Consolas';
	// ...
}
//类似的使用方法经常会用到，比如创建一个弹窗，可以使用
new Dialog({
	title:'标题',
	content:'<p>内容</p>',
	bts:[{
		text:ok,
		callback:fn
	},{
		text:cancel,
		callback:fn
	}]
})

ES6中从对象取参也可以设置默认值

let { bstatus, data = {}, isFetchSuccess, resstatus = {} } = res;

3.工厂函数

var o; 
if (type === 'Image') { 
 o = new MYAPP.dom.Image(); 
} 
if (type === 'Link') { 
 o = new MYAPP.dom.Link(); 
} 
if (type === 'Text') { 
 o = new MYAPP.dom.Text(url); 
} 
o.url = 'http://...' 
o.insert();
MYAPP.dom.factory = function(type, url) { 
 return new MYAPP.dom[type](url); 
}; 
//然后我们就可以把上面的三个 if 替换掉了：
var image = MYAPP.dom.factory("Image", url); 
image.insert(document.body);

工厂函数也是经常会用到的设计模式，
比如我们写一个埋点组件，需要埋viwe(PV,UV),log,Request,Error等待，我们可以写到一个方法中去调用。

//ubt.js
UBT = {
	log:fnLog,
	view:fnViw,
	req:fnReq,
	error:fnError,
	pushLog:function(arg){
		new this[arg.type]();
		...
	}
}
//调用
UBT.pushLog({
	type:'view|log|req|error',
	key:key,
	pageName:pageName,
	...
})

附录A 保留字

附录B 内建函数

附录C 内建对象

Object.prototype：该对象是所有对象的原型，包括Object本身
constructor：该属性指向用来构造该对象的构造函数

Object.prototype.constructor === Object; // true
let o = new Object();
a.constructor === Object; // true

hasOwnProperty(prop)：该方法仅在目标属性为对象自身属性时返回true,从原型链继承或者不存在改属性时返回false
isPrototypeOf(obj)：目标对象是当前对象的原型，返回true

var s = new String('');
Object.prototype.isPrototypeOf(s); // true
String.prototype.isPrototypeOf(s); // true
Object.prototype.isPrototypeOf(String.prototype); // true
Array.prototype.isPrototypeOf(s);  // false

Object.getPrototypeOf(Obj)：获取对象的原型

Object.getPrototypeOf([]) === Array.prototype; // true

Object.getOwnPropertyDescriptor(obj,property)：查看对象属性的特性(value,configurable,writable,enumerable)

附录D 正则表达式

[abc]匹配字符类信息，返回一个数组

"some text".match(/[otx]/g);
["o","t","x","t"]

[a-z]区间匹配，返回也是一个字符串数组，可以实现一串字符去除空格的逻辑

" some text ".match(/[a-zA-Z0-9]/g).join('') //sometext