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

Posted 2020-06-28 逆光飞翔23

第五章

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);