《JavaScript高级程序设计》心得笔记-----第二篇章

第五章

9、Function函数

1)         函数内部有两个特殊的对象:

(1)       arguments(主要用于保存函数参数,有一个属性callee,这是一个指针,指向拥有arguments对象的函数),但是在函数严格模式下,arguments.callee会出错,这时候可以使用函数表达式来完成

eg:var fac = (function  f(num){

return num*f(num-1);

});

(2)       this

2)         属性:length(参数个数)和prototype(保存实例的方法,比如:toString()和valueOf())

3)         apply()接收2个参数:运行函数的作用域(this或其他)和参数数组(arguments,[ , , ,]),在严格模式下,this不会转型为window,要明确把函数加入到某个对象中,不然将指向underfined。

call()接收多个参数:第一个参数运行函数的作用域(this或其他)和剩下的是传入的各个参数,用,分隔

以上两个属性用来扩充函数赖以运行的作用域:

比如:

window.color = “red”;

var o = {color:”blue”};

function f(){

alert(this.color);

}

f();

f.call(this);//red

f.call(window);//red

f.call(o);//blue

4)         bind()创建函数的实例,比如:f.bind(o);//blue

5)         特殊引用类型:Boolean、Number、String -------------------------------àObject

(1)       Boolean中的所有对象都会返回true,尽管传false的值给它,比如:var s = new Boolean(false);

(2)       Number:

(1st)     toFixed()方法会按照指定小数返回数值的字符串:

var num = 10;

num.toFixed(2);//10.00

(2nd)             toExponential()【num. toExponential();//1.0e+1】和toprecision()

【 num. toprecision(1)//1e+1

num. toprecision(2)//10

num. toprecision(3)//10.0

(3)       String:

(1st)     charAt(1)字符位置的那个字符、stringValue[1]àie8以上可用

(2nd)             charCodeAt(1) 字符位置的那个字符编码

(3rd)     concat();添加字符串;比如:s.concat(“das”);

(4th)     slice()[eg: slice (2,7),2是开始位置,7是结束位置]

(5th)     substr()[eg:sunstr(2,7),2是开始位置,7是字符个数]

(6th)     substring()[eg: substring (2,7),2是开始位置,7是结束位置]

(7th)     trim();去除字符串前后位置的空白格

(8th)     search();找到返回第一项匹配的索引,没有返回-1

eg:var text = “cat , bat”;

var pos = text.search(/at/);//1

(9th)      replace();第一个参数可以是字符串也可以是正则表达式,第二个是替换    的内容,可以是参数也可以是函数;

$n: text. replace(/.at/g,”word($1)”);// word(cat), word(bat)

(10th)            split(),分隔符,可一个参数,也可两个参数【第二个指定数组大小】

(11th)           localCompare(),比较字符串,前大于后(-1),前小于后(1),等于(0)

(12th)           String的fromCharCode()与charCodeAt()相反操作

eg: String. fromCharCode(104,101);//he

(13th)           Golbal:编码:

  1. encodeURI()[对空格进行编码]

encodeURIComonpent()[对非标准字符进行编码{:、/、?、#}进行编码]

  1. eval();

eg:eval(“function f(){执行代码}”);

(14th)           Math方法:max()、min()、SQRT2、SQRT1_2、ceil()[向上舍入]、floor()[向下舍入]、round()[标准舍入]、random()[随机数]、abs[绝对值]

第六章

1、    数据属性:(不要再ie8使用)

configurable:默认true,是否通过删除修改属性的值

enumerable:默认true,是否通过for-in循环返回属性

writable:默认true,能否修改属性的值

value:属性的数据值,默认underfined

修改属性的默认特性,需要使用Object.defineProperty()

eg:var person = {};

Object.defineProperty({person,”name”,{ writable:false,value:”ccl” }})【ie9+、fixfox 4+、Safari 5+、Opera 12+、Chrome】

2、    访问器属性:

configurable:默认true,是否通过删除修改属性的值

enumerable:默认true,是否通过for-in循环返回属性

get:读取属性调用的函数值,默认underfined

set:写入属性调用的函数值,默认underfined

修改属性的默认特性,需要使用Object.defineProperty(),在严格模式下,get和set需要同时使用,不然会抛出错误,在费严格模式下,只指定set,没指定get会抛出underfined.

访问容器的旧方法:_defineGetter_()、_defineSetter_()

Object.defineProperty()第二个参数也可以传入多个属性,并分别对每个属性定义属性,

eg: Object.defineProperty({person,{_year: { writable: true,value:”2001” },name: { writable:false,value:”ccl” }} , set:function(newvalue){}})

3、    原型模式(prototype):eg:Person.prototype.name=””;

1)         可以通过Person.prototype.isPrototypeOf(person1)来测试person1是否指向Person.prototype

2)         在ECMAScript5中,Object.getPrototype(person1) ==Person.prototype,取值的话采用Object.getPrototype(person1).name

3)         删除实例的属性:delete  person1.name

4)         检测一个属性是否存在原型中,person1.hasOwnPrototype(“name”);

5)         检测实例中或者原型中是否存在属性:”name”  in  person1

6)         取得对象上所有可以枚举的实例属性:Object.keys(Person.prototype)或者Object.keys(person1)

7)         原生模型省略了构造函数传递初始化参数这一环节,默默人情况下,都将取得相同的值,解决地话,可以结合构造函数换模式和原型模式。所有的默认原型都是Object实例

8)         原型式的继承可以使用Object.create()或者Object();

eg:var p1 = Object.create(person1);      p1.name=”xx”;

9)         寄生组合式继承:inheritPrototype(SubType,SuperType)

第七章

1、    function是关键字,name是指向函数的名字(只适用于FireFox、Safari、Chrom、Opera),function后面没有标识符的话,这时候创建的函数叫做匿名函数(拉姆达函数),匿名函数的name属性是空字符串

functionName.name

2、    函数声明和函数表达式的区别:

函数声明:function fn(){}

函数表达式:var sfn = function(){}

3、    闭包:在一个函数内部创建另一个函数,闭包只能取得包含函数中任何变量的最后一个值

4、    this在闭包下如果要指向函数的话,应该先声明var that = this;在用声明值去调用

5、    块级作用域(私有作用域):

(function(){

//块级作用域

})();

6、    私有变量:函数中定义的变量度可以认为是私有的

特权方法:有权访问私有变量和私有函数的公有方法

7、    模块模式:

1)         单例:只有一个实例的对象

eg:var  singleton = {

name:”value”,

method:function(){

//这里是方法的代码

}

}

模式通过为单例添加私有变量和特权方法使其得到加强

eg: var  singleton = function(){

var  p = 10;

function  pFunction(){return false;}

//特权、共有方法和属性

return{

publicProperty:true,

publicMethod:function(){

p++;

return  pFunction();

}

}

}

2)         在匿名函数内部,定义了私有变量和函数,在将对象字面量【单例的接口】作为函数的返回值,在这种模式下,需要对单例进行某些初始化,有需要维护其私有变量:

eg:var appliaction = function(){

//私有变量和函数

var components = new Array();

//初始化

components.push(new BaseComponents());

//公共

return{

getComponents:function(){return components.length;},

regiestComponents:function(component){

if(typeof component == “object”){

components.push(component);

}

}

}

}

3)         增强的模块模式

var  singleton = function(){

var  p = 10;

function  pFunction(){return false;}

//创建对象

var object = new CustomType();

//特权、共有方法和属性

object.publicProperty = true;

publicMethod:function(){

p++;

return  pFunction();

}

return   object,

}

第八章

1、    全局变量不能通过delete操作符删除,直接在window对象上的定义的属性可以,因为在IE<9的版本在遇到delete会抛出错误

2、    窗口位置:

1)         IE、Safari、Opera、Chrome使用:screenLeft和screenTop

2)         Firefox、Safari、Chrome使用:screenX和screenY

3)         移动使用:moveTo(  ,  )和moveBy(  ,  )

窗口大小

1)         IE9+、Safari、Opera、Chrome、Firefox提供:innerWidth、innerHeight【减去边框宽度】,outerWidth、outerHeight。IE9+、Safari、Firefox的outerWidth、outerHeight返回浏览器本身窗口的尺寸,Opera返回页面视图容器的大小,Chrome中innerWidth、innerHeight,outerWidth、outerHeight返回相同的值

2)         在IE、Safari、Opera、Chrome、Firefox中,document.documentElement.clientWidth和document.documentElement.clientHeigth保存了页面视口的信息,在IE6中,以上标准模式有效,在混杂模式下,采用document.body.clientWidth和document. body.clientHeigth,混杂模式下的Chrome,以上四种都可以。

3)         resizeTo(a,b)调整到a*b

resizeBy(c,d)调整到a+c,b+d

3、    window.open()打开一个特定的url或者信息浏览器窗口。里面可传四个参数,要加载的url、窗口目标(可以是一个target框架名或者_self、_blank、_parent、_top)、一个特性字符串(不打开新窗口,忽略这个,打开的话,可设置fullscreen[yes,no,IE]、heigth、width、left、rigth、scrollbar…)、表示新页面是否取代李兰器历史记录当前加载页面的布尔值

var xxx=window.open(…….);

xxx.opener == window

window.close(); ======xxx.closed

浏览器内置的屏蔽程序阻止弹出窗口,window.open()可能为null

4、    超时调用

var time = setTimeout(代码字符串或者函数,1000);

clearTimeout(time);

间歇调用:

var time = setInterval(代码字符串或者函数,1000);

clearInterval(time);

5、    系统对话框:alert()、confirm()、prompt()

6、    location既是window的对象的属性,也是document的对象的属性

7、    history对象:history.go(-1)—后退、history.go(1)—前进、history.go(2)、history.go(“xxx.com”)

也可以用back()和forward()来代替

第九章

1、    能力监测:用于识别浏览器的能力

if(object.prototypeInQuestion){

}

早期IE5之前使用document.all[id],后来的使用document.getElementById(id)。

2、  怪癖检测:识别浏览器的特殊行为,看存在什么bug

var hasDontEnumQuirk = function(){

var o = (toString:function(){});

for(var prop in o){

if(prop == "toString"){

return false;

}

}

return true;

}();

//检测呈现引擎及浏览器

var ua = navigator.userAgent;

if ( window.opera ){

engine.ver = window.opera.version();

engine.opera = parseFloat( engine.ver );

} else if ( /AppleWebKit\/(\S+)/.test(ua)){

engine.ver = RegExp["$1"];

engine.webkit = parseFloat(engine.ver);

//确定是Chrome 还是 Safari

if ( /Chrome\/(\S+)/.test(ua)){

browser.ver = RegExp["$1"];

browser.chrome = parseFloat(browser.ver);

} else if ( /Version\/(S+)/test(ua)){

browser.ver = RegExp["$1"];

borwser.safari = parseFloat(browser.ver);

} else {

//近似的确定版本号

var safariVersion = 1;

if (engine.webkit < 100 ){

safariVersion = 1;

} else if (engine.webkit < 312){

safariVersoin = 1.2;

} else if (engine.webkit < 412){

safariVersion = 1.3;

} else {

safariVersion = 2;

}

browser.safari = browser.ver = safariVersion;

}

} else if ( /KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){

engine.ver = RegExp["$1"];

engine.khtml = parseFloat(engine.ver);

} else if ( /rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){

engine.ver = RegExp["$1"];

engine.gecko = parseFloat(engine.ver);

//确定不是Firefox

if( /Firefox\/(\S+)/.test(ua)){

browser.ver = RegExp["$1"];

browser.firefox = parseFloat(browser.ver);

}

} else if (/MSIE ([^;]+)/.test(ua)){

engine.ver = browser.ver = RegExp["$1"];

engine.ie = browser.ie = parseFloat(engine.ver);

}

针对浏览器

if(client.engine.webkit){

if (client.browser.chrome) {

}else if (client.browser.safari){

}

} else if (client.engine.gecko) {

if (client.browser.firefox) {

}else{

    

}

}

检测引擎、浏览器、平台、操作系统

var client = function(){

//呈现引擎

var engine = {

ie : 0,

gecko : 0,

webkit : 0,

khtml : 0,

opera : 0,

//具体的版本号

ver : null

};

var browser = {

//浏览器

ie : 0,

firefox : 0,

konq : 0,

opera : 0,

chrome : 0,

safari : 0,

//具体的版本

ver : null

};

var system = {

win : false,

mac : false,

xll : false

};

//再次检测呈现引擎、平台和设备

return {

engine : engine,

browser : browser,

system : system

};

}();

//navigator.platform值Win32 、Win64、MacPPC、MacIntel、X11、Linux i686

var p = navigator.platform;

system.win = p.indexOf("Win") == 0;

systemp.mac = p.indexOf("Mac") == 0;

system.xll = (p.indexOf("Xll")) == 1 || (p.indexOf("Linux") == 0);

时间: 2024-10-24 05:25:04

《JavaScript高级程序设计》心得笔记-----第二篇章的相关文章

JavaScript高级程序设计学习笔记第二章

1.向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素 2.HTML 4.01中定义了<script>元素的六个属性(方便记忆,可将6个属性分为3组) 第一组: async:可选.表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本.只对外部脚本文件有效.(使用<script>不属于外部脚本) defer:可选.表示脚本可以立即下载,但是延迟到文档完全被解析和显示之后再执行.只对外部脚本文件有效. 第

JavaScript高级程序设计学习笔记第二十章--JSON

1.JSON:JavaScript Object Notation, JavaScript 对象表示法. 2.最重要的是要理解它是一种数据格式,不是一种编程语言.虽然具有相同的语法形式,但 JSON 并不从属于 JavaScript.而且,并不是只有 JavaScript 才使用 JSON,毕竟 JSON 只是一种数据格式.很多编程语言都有针对 JSON 的解析器和序列化器. 3.语法: JSON 的语法可以表示以下三种类型的值: 简单值:使用与 JavaScript 相同的语法,可以在 JSO

JavaScript高级程序设计 读书笔记 第二章

<script>元素 直接在页面中嵌入JavaSript代码或包含外部JavaSript文件. 在代码中任何地方不能出现</script>,可通过转义字符'\'解决. 在XHTML中可省略</script>,HTML中不能. 延迟脚本:defer属性(defer="defer"),告诉浏览器立即下载,延迟执行.最好只包含一个延迟脚本. 异步脚本:async属性(async="async"),不让页面等待两个脚本下载和执行,异步加载

JavaScript高级程序设计学习笔记--基本概念

1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; //有效的语句--推荐 虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它.两个原因:1.加上分号可以避免很多错误 2.加上分号也会在某些情况下增进代码的性能,因为这样解析器就不必再花时间 推测应该在哪里插入分号了. 2.变量 var message="hi"; 像这样初始化变量

Javascript高级程序设计学习笔记

3. 基本概念 基本数据类型:Undefined,Null,Boolean,Number,String. 复杂数据类型:Object. 3.6 语句 switch比较值时用的是全等运算符 “===” ,因此不会进行类型转换.例如 “10” 不等于10. 3.7 函数 ECMAScript函数不介意传递进来多少个参数,也不在乎参数的类型.即使定义的函数只接受两个参数,在调用的时候也可以传递任意多个或者0个.因为ECMAScript的参数在内部是用一个数组表示的,在函数体内部可以通过argument

JavaScript高级程序设计学习笔记--高级技巧

惰性载入函数 因为浏览器之间行为的差异,多数JavaScript代码包含了大量的if语句,将执行引导到正确的代码中,看看下面来自上一章的createXHR()函数. function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeo

JavaScript高级程序设计学习笔记--BOM

window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的Global对象. 全局作用域 由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法.来看下面的例子: var age=29; function sayAge(){ alert(this.age); }

JavaScript高级程序设计学习笔记--引用类型

Object类型 对象字面量表示法: var person={ name:"Nicholas", age:29, 5:true }; 这人例子会创建一个对象,包含三个属性:name,age和5.但这里的数值属性名会自动转换为字符串. 对象属性的访问:点表示法和方括号语法 alert(person["name"]); // "Nicholas" alert(person.name); // "Nicholas" 从功能上看,这两

JavaScript高级程序设计学习笔记--错误处理与调试

try-catch语句 只要代码中包含finally子句,则无论try或catch语句块中包含什么代码--甚至return语句,都不会阻止finally子句的执行,来看下面这个函数: function testFinally(){ try{ return 2; }catch(error){ return 1; }finally{ return 0; } } 调用这个函数会返回0(PS:但我实际执行的时候会先返回0,再返回2) 抛出错误 与try-catch语句相配的还有一个throw操作符,用于

JavaScript高级程序设计学习笔记--面向对象程序设计

工厂模式 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用 工厂模式的一种变体. 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