JavaScript高级程序设计
- 变量,作用域和内存问题
-
object类型值的引用赋值
var obj1 = new Object(); var obj2 = obj1; obj1.name = 'za' //obj2.name = za 函数参数全部都是值传递
-
typeof|instanceoftypeof(a); a instanceof b; JS没有块级作用域(所以if或者for中的变量可以在之后继续调用)
局部变量的优先级高于全局变量的优先级
作用域(scope)和作用域链(scope chain)
自动垃圾回收机制(标记清除类型 | 引用计数)
设置对象的值为null来手动解除引用
-
- 引用类型
-
大部分引用类型是Object的
var a = {a:b,c:d} -
Array
array.lengthisArray-
toString,valueOf,toLocalString,join('#') - 直接使用
push和pop将array变成栈类型 - 使用
push和shift变成队列类型,unshift向前端推入任意项的数据 -
sort(function<排序规则>)和reverse() -
array.concat(array1,array2)合并数组 -
array.slice(beginSynax,endSynax)选取某几个创建数组 -
array.splice(begin,number,array)替换 -
array.indexOf() | array.lastIndexOf()查找 - 迭代方法
-
every(): filter()foeEach()map()some()
-
- 归并方法
reduce()-
reduceRight()var values = [1,2,3,4,5]; var sum = values.reduce(function(prev, cur, index, array){ return prev + cur; }); alert(sum); //15
-
Date类型
-
Date.parse()返回毫秒数Date.parse('Wed, 09 Aug 1995 00:00:00 GMT') -
Date.UTC(year, month[, day[, hour[, minute[, second[, millisecond]]]]])var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0));
-
-
- RegExp类型(正则表达式的支持)
var expression = / pattern / flags(g|i|m);
- function
函数声明早于函数执行
-
this 和 arguments.callee(指向函数本身,arguments为传入的参数)
function factorial(num){ if (num <=1) { return 1; } else { return num * arguments.callee(num-1) } } -
javascript中的三种类型的方法
- 对象方法:声明在函数体内部的
- 类方法:使用函数名+.+方法名声明的
- 原型方法:使用函数名+.+prototype+.+方法名声明的
-
length(函数希望得到的参数个数) 和 prototype
- prototype->
- prototype不能枚举
- 增加一个既有对象的方法
object.prototype.functionName = ()=>{} - 函数原有的方法无法使用prototype进行修改
-
function和作用域的绑定
function.apply(作用域,参数列表(array/arguments))function.call(作用域,argument1,argument2...)-
function.bind(object):绑定作用域到function中,即传this到function中
-
Boolean,Number,String引用类型
String ->
查找String特定位置的字符:
String.charAt(1)|String.charCodeAt(1)|String[1]字符串操作:
concat()|slice()|substr()|substring()字符串位置:
indexOf()|lastIndexOf()|字符串分割:
trim()大小写转换:
toLowerCase()|toLocalLowerCase()|toUpperCase()|toLocalUpperCase()-
字符串模式匹配:
match()|RegExp.exec()|search()|replace()var text = "cat, bat, sat, fat"; var pattern = /.at/; //与pattern.exec(text)相同 var matches = text.match(pattern); alert(matches.index); //0 alert(matches[0]); //"cat" alert(pattern.lastIndex); //0 localeCompare()fromCharCode():将若干个编码转化成字符串
-
单体内置对象(Global和Math)
- Global->
- URI编码方法:
encodeURI()<==>decodeURI()|encodeUIRCompoent()<==>decodeURIComponent() eval()window- Math->
-
min()|max()|ceil(向上)|floor(向下)|round(标准)
- 面向对象
-
数据属性
- 修改
Object.defineProperty(object,'object.attribution',{writable:false ...})
-
访问器属性(getter和setter)
- [Configurable]
- [Enumerable]
- [[Get]]
- [[Set]]
- 修改
Object.defineProperty(object,'object.attribution',{get:()=>{}})
私有成员变量:
_attribution-
defineproperties()
Object.defineProperties(object, 'object.attribution':value, 'object.attribution':{ get:()=>{} } ) -
定义对象的getter和setter方法
object.__defineGetter__('object.attribution',()=>{return value}) object.__defineSetter__('object.attribution',()=>{return value}) 读取属性的特性:
Object.getOwnPropertyDescriptor(object,object.attribution)-
创建对象:
-
工厂模式:
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 person1 = createPerson("Nicholas", 29, "Software Engineer"); var person2 = createPerson("Greg", 27, "Doctor"); -
构造方法(首字母大写,没有返回值)
function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName(){ alert(this.name); } var person1 = new Person("Nicholas", 29, "Software Engineer"); var person2 = new Person("Greg", 27, "Doctor"); -
原型模式(prototype)
function Person(){ } Person.prototype.name = "Nicholas"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function(){ alert(this.name); }; var person1 = new Person(); person1.sayName(); //"Nicholas"
-
-
- `Person.prototype.isPrototypeOf(person1)` | `Object.getPrototypeOf(person1).name`
- 原型更新马上能体现在实例上(动态性),但是重写原型会导致之前的实例报错
- 组合使用原型和构造函数
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
- 继承
- 原型链
-
SubType继承了SuperType的prototypefunction SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
-
- 原型链
- 所有的原型都继承于object
- BOM(browser object model)
- window对象
- 超时调用和间歇调用
- 超时调用
setTimeout|clearTimeout - 间歇调用
setInterval|clearInterval
- 超时调用
- 系统对话框
alert()-
confirm()if(confirm('Are you sure?')){ alert('sure'); }else{ alert('false'); } -
prompt('提示','默认值')let result = prompt('What's your name?',''); result = null;
- 超时调用和间歇调用
- location对象
-
属性:
locationAttribution.png 查询字符串
location.search位置操作
location.assign
-
- navigator对象(用于识别浏览器对象)
- 检测插件
navigator.plugins - 注册处理程序
navigator.registerContentHandler|navigator.registerProtocolHandler
- 检测插件
- screen对象
- history对象
- window对象
- DOM
-
5个常用的DOM方法:
getElementByIdgetElementByTagNamegetElementByClassName-
setAttribute(value,new_value)&&element.value = new_value getAttribute
-
element.childNodes- nodeType
- nodeName
- firstChild
- lastChild
- length
-
html中的12种节点
- element_node(就是标签)
- attribute_node(标签中的属性)
- text_note(文本内容) ...
nodeValue
-
平稳退化
- window.open(url,name,features)
- javascript伪协议
javascript: - 渐进增强
- css
-
分离js
- window.onload = function(),在所有的html加载完以后再执行
向后兼容性
性能考虑
JSMin | YUI Compressor | Closure Compiler
-
addLoadEvent(用于执行window.onload的多个function)function addLoadEvent(func){ var old_on_load = window.onload; if(typeof window.onload!='function'){ window.onload = func; }else{ window.onload = function(){ old_on_load(); func(); } } } onkeypress监听键盘
HTML-DOM和DOM-core
-
动态创建标签
document.writeinnerHTML-
creatElement创建元素 -
createTextNode创建文本节点 -
appendChildappend to the end of parentNode -
insertBefore- parentNode
- lastChild
- appendChild
- insertBefore
- nextSibling
element.style.color- 伪类
a:hover - 通过使用className来进行
element.className element.addClass
setTimeout("function",interval)praseInt(type string)
Modernizr库对于HTML5和CSS的改变
-
- 客户端检测
- 事件
- 事件冒泡
- 事件捕获
- note
-
babel可以将es5的代码转化成es6
- 先将es6转化成ast(抽象语法树)
- 根据指定的presets(规则集)转化成对应的语法
- 支持JSX
<script>:defer<noscript>:在js不被支持或者被禁用的情况下调用ES5严格模式:
在脚本顶部添加
"use strict"所有变量都要显式地使用var声明
-
编译时确定属性和方法属于谁
-
禁止使用with
with(){ var name = '1'; } eval作用域
禁止删除变量
-
显式报错(当给只读属性进行赋值时|没有八进制|...)
-
安全措施:
禁止this关键字指向全局变量
-
禁止函数内部遍历调用栈
function f1(){ "use strict" f1.caller;//报错,指向当前函数 f1.argument;//报错,指向传入的参数 }
不能有重名的参数和属性
禁止八进制表示法
-
arguments对象限制
- 不允许对arguments进行赋值
- arguments不再追踪参数的变化
- 禁用arguments.callee
函数必须声明在顶层
保留字增加
-
let和const(var表示局部变量,不加var表示全局变量)
function(){ var name;//局部变量 } funciton(){ name = 'jack';//全局变量 } -
ECMAScript中
typeof返回的类型值:-
undifined:未定义 -
boolean:bool型- 使用Boolean()函数转化值
-
-
- `string`:字符串
- `number`:数字
- `NaN`:返回值需要是一个number时,并没有返回number
- `isNaN()`:`valueOf()`->`toString`
- `object`:对象或者null
- `function`:函数
- document.all():页面所有元素
- .focus():光标聚焦
- 表单提交验证
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.html" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
- `addEventListener`:为指定元素添加事件
<script>
document.getElementById('Button').addEventListener(
'click',function(){
document.getElementById('demo').innerHTML='Hello World'
})
</script>
- `removeEventListener`:移除元素的事件
document.removeEventListener(
document.getElementById('Button',function1))