Javascript - 学习笔记

JavaScript -学习笔记

 

概述：

javascript和java没有任何关系，javascript也可以算是面向对象的语言（这个貌似有争论），可以用面向对象的思维开发，是基于对象的语言，没有类的概念，它由原型链模拟实现了面向对象语言中的继承（伪继承机制，实质是修改当前自定义对象或者function对象），对象实现了封装。

 

闭包：

 -- 闭包也是模拟面向对象语言中的封装，上面的对象封装无法阻止直接访问对象中的某个属性，可以业务逻辑要求这个属性必须经过预处理，

 -- 利用函数作用域（局部变量对外隐藏），实现属性的对外隐藏，只可以通过返回的对象中的函数（直接返回函数）访问已经预处理的数据，有点类似于javabean，例如实现一个检索功能。

 -- 本质上就是一个未被释放的栈内存，正常一个函数调用完成后，栈桢即被释放，但是当局部变量被返回的对象中的function对象使用，这个栈桢无法被正常释放，这个未被释放的栈桢就是类似一个类对象，局部变量就变成了类似这个类对象的成员属性，被返回的function对象就是类似处理这个成员属性的成员方法

 --在确定不使用了这个类对象后（栈桢），可以将返回的JSON格式对象或者function对象引用指向null，间接的释放掉栈桢。

 --使用闭关实现封装，也是为了写出易读易懂得代码

 

思维图：

内存模型（对象在堆，函数执行栈桢）》对象》原型链》函数命名方式》函数调用》作用域

 

内存管理：

  -- 生成的对象存储在堆内存（window，document，JSON自定义对象，Fucntion对象）

  -- 执行Function对象时，产生一个栈桢，当前执行过程中又执行另一个Function对象时，再产生一个栈桢，多重会产生栈桢递归调用，再从最底层依次返回

  -- 栈桢中存放局部变量，形参，计数器，当一个执行过程结束，栈桢内存即被释放

  -- 垃圾回收器自动回收无root引用的对象， root可以是对象的属性，方法的局部变量或者形参

 

 详情：

1.对象种类

    --javascript 最顶层的对象就是window, window对象包含的其他属性对象如下

    window - screen

                 - history

                 - location

                 - navigation

                 - frames

                 - document -- 其实就是dom对象用来操作文档内的节点

                 - 定义对象 -- 1.实例化的自定义JSON格式对象，

                                      2.实例化的内置类对象(Array,Date,Error,Math,Number,Object,String，Function),

                                      3.直接定义的Function对象，就是定义一个命名函数,函数比较特殊所以从内置对象中                                          单独提出说明下，调用函数对象才会产生栈桢

                                      4.由new Fuction对象创建新的自定义对象

                                      5.由new Object创建新的自定义对象

                 - 直接定义在文档内的基本数据类型 -- 数值，布尔，字符串，undefined,null

 

2.Function对象（函数）声明方式

  --显式声明方式，在window对象中的声明调用和自定义JSON格式对象中的匿名函数中声明

  --匿名声明方式，window对象中声明并赋值给一变量，声明定义自定义JSON格式对象中的匿名函数

3.Function对象显示声明

   -- 一种是正常的函数声明调用

   -- 另一种是内部使用this，使用new是一种特殊的调用方式会生成一个新对象

4.Function对象补充说明

    -- 每一函数其实就是一个function对象

    -- 2种定义声明函数对象方式：

       a.显式命名-- 

          function functionName(arg){}

           i.这种命名函数定义在文档内，其实可以是自定义类属于window

           ii.直接定义在文档内的函数对象属于window对象，可以由其他window的成员函数或者自定义对象中函数调用

       b.匿名方式

         function(arg){}

          -- window: 直接定义文档里必须指明引用，var f = function(arg){}

          -- JSON对象中的使用匿名函数对象定义

 

5.实例化对象方式

    --显式Function对象 

    function Class(name, value){

       this.member1 = "instance value";//this标识是是实例属性，外部访问每个实例对象有自己的值

       class.member2 = "class value";//类名修饰的是类属性，所有实例对象都可以取到相同的值,在外部必须以"类名.member2"方式访问,如果以实例对象.member2会得到undefined

       var name = "abc";//var或者无修饰的为局部变量，在外部是无法访问的，只能在成员函数中使用

       var age = "18";

       var b = function(arg){};

    }

   --使用显示fuction对象创建新对象

    var g = new Class("abc", "18");

    var f = new Class();

    f.c = "cde";//可以直接添加成员属性

    f.d = function(arg){};//可以直接添加成员函数

 

   -- new Object方式创建自定义对象

    var myObj = new Object(); myObj.name = "abc";myObj.f=function(){};

 

   -- JSON格式自定义对象

    var myObj = {

                              var name : "abc",

                              var f : function(arg){}

                           }

       //在某个函数中更常用的方式是 var myObj ={};myObj.attr1 = "abc";

 

6.对象关系

  -- window对象为顶层对象，可以拥有JSON自定义对象，Function对象及由Function对象new的对象

  --JSON对象和Function对象和Function对象new的对象，可以互相拥有

 

7.Function对象（函数）的调用 -- 详细参考《你所不知道的javascript》

  -- 隐式调用

  -- 显式调用

  -- new调用

  -- Function对象 就是一普通对象，只有执行时使用()，才会生成栈桢，所以闭包中的局部变量是被Function对象引用着，所以无法释放。

 

8.函数作用域

  -- 从上到下的层级，Object->Function A -> Function -> B ->Fcution C 定义顺序，在调用这些function对象产生栈桢的递归调用，Function A的局部对象向下可见，Function C的局部对象自由它自己可以使用

 

9.伪继承机制

   --javascript没有真正的类继承，实质是对原有Function对象或者由Fuction对象产生新的对象的进行修改

       function Class(){

            var member1 = "member1";

            function1 = function(arg){};

       }

       var c1 = new Class();

       var c2 = new Class();

       Class.prototype.function2=function(){}; -- 这是c1和c2对象都拥有了fucntion2对象函数

       c1.prototype.fuction3=function(){} -- 只有c1对象拥有fuction3对象函数

 

    

 

10.Dom Element：

function对象也就是函数就是用于window成员函数或者自定义函数，还有页面element的成员属性（如element.onclick = function(){}）,这类其实就是dom元素，其定义的成员函数是由浏览器中的事件去触发,而自定义函数的调用时由具体业务逻辑代码相互调用

           所有的逻辑执行一定都是在函数中，对象的创建，赋值，计算,判读循环

 

11.正则表达式

   使用方法：/ /中间包含匹配输入及通配符 -- "^" 匹配以输入开始并且以$匹配以输入结束, $/g是进行全局匹配,否则只匹配第一个后结束, \表示转义字符

   a.匹配输入，如下

      /<a href=/

    b.匹配通配符    

      /^<a href=(\'|\")[a-zA-Z0-9\/:\.]*(\'|\")>.*<\/a>$/  

      --1.匹配以<a href=开始 2.匹配'或者" 3.匹配大小写字母，数字，/，:  ，. ，出现多次 4.匹配'或者" 5.匹配> 6.匹配任意字符出现多次 7.匹配以</a>结束

     <a href='http://www.com.website'>跳转</a>

    3./^<a href=(\'|\")[a-zA-Z0-9\/:\.]*(\'|\")>.*<\/a>$/.test(str);返回true or false

    4.str.replace(/(^\s*))|(\s*$/g, ""), 就是trim处理

 

12. == 和 ===

    4.1. 两个基本数据类型比较

       a. ==比较的是将两边转换为同一类型后的比较

       b. ===先进行类型比较,再进行值比较

    4.2 两个Object类型(包括自定义和内置)比较

       a.无区别，都是进行地址比较

    4.3 一个基本类型和一个Object类型

       a. ==先将高级类型转换为基本类型进行值比较

       b. ===类型不同， false

13. null 和undifined --其实是两种基本数据类型，其唯一的值和类型名一样

   a.undifined -- 未定义对象属性时 访问未定义属性是undifined

   b.null -- 定义了对象属性,其值为null

   c.直接判断是否为undifined或者null

      if(!arg){}//基于强制类型转换会将undefined or null转换为布尔类型,转换后为false

   d.某些浏览器可能不支持undefined值，只需在window下添加一个全局变量即可 var undefined;

 

14.typeof 和instanceof

  6.1. typeof即可以作为一个函数使用，也可用当一个运算符使用

     a. typeof(a) 或者 typeof a

     b.返回值为 基本数据类型(undefined,null,boolean,number,string),自定义及内置对象(object),函数对象function

  6.2 instanceof --判读某个变量是否为指定类的实例，返回ture or false

     var a = [4.5];

     instanceof Array;

     instanceof Object;

     所有类的基类都是Object，所以以上都返回true

 

15.with语句 -- 使用with语句避免书写同一对象

 

with(document){
       document.writeln("a");
       document.writeln("a");
       document.writeln("a");
}

  

16.window子窗口与父窗口 --非模态窗口交互

   16.1 打开子窗口

    a.使用如下方法 --该方法返回子窗口window对象，可以操作子窗口中的成员属性及方法

 

var subWindow = window.open ('url/index.html','newwindowID','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');
subWindow.toolUtil.test("abc");
//参数说明:
//window.open 弹出新窗口的命令； 
//'page.html' 弹出窗口的文件名； 除了url其余都是非必填
//'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替； 
//height=100 窗口高度； 
//width=400 窗口宽度； 
//top=0 窗口距离屏幕上方的象素值； 
//left=0 窗口距离屏幕左侧的象素值； 
//toolbar=no 是否显示工具栏，yes为显示； 
//menubar，scrollbars 表示菜单栏和滚动栏。 
//Resizable=no 是否允许改变窗口大小，yes为允许； 
//location=no 是否显示地址栏，yes为允许； 
//status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许； 

  

    16.2.子窗口中操作父窗口 -- 子窗口中可以使用window.opener属性获取父窗口window,然后可以操作父窗口中的成员属性及方法

       a.window.opener.toolUtils.test("abc");

 

17.window子窗口与父窗口 -- 模态窗口交互

   a.调用如下方法打开一个模态窗口

       

window.showModalDialog(URL, arguments, features)//方法用来创建一个显示HTML内容的模态对话框
//参数说明:
//URL  -- 必选 字符串 用来指定对话框要显示的网页的URL。
// arguments --可选     用来向对话框传递参数,参数类型不限 ,对话框通过window.dialogArguments来取得传递进来的参数。
//features   --可选 字符串 用来描述对话框的外观等信息
//=========
//features参数说明
 //参数名称 参数属性 说明
 //dialogHeight npx 对话框高度，不小于100px
 //dialogWidth npx 对话框宽度
 //dialogLeft npx 离主窗口左的距离
 //dialogTop npx 离主窗口上的距离
 //center {yes | no | 1 | 0 } 窗口是否居中，默认yes
 //help {yes | no | 1 | 0 } 是否显示帮助按钮，默认yes
 //resizable {yes | no | 1 | 0 } 是否可改变大小，默认no
 //status {yes | no | 1 | 0 } 是否显示状态栏，默认为yes[ Modeless]或no[Modal]
 //dialogHide { yes | no | 1 | 0 | on | off } 在打印或者打印预览时对话框是否隐藏，默认为no
 //scroll { yes | no | 1 | 0 | on | off } 指明对话框是否显示滚动条，默认为yes
 //edge { sunken | raised } 指明对话框的边框样式，默认为raised
 //unadorned { yes | no | 1 | 0 | on | off } 默认为no

 

 b.样例：

//父窗口
var returns = window.showModalDialog("test.HTML",window,"");//传入当前父窗口window到子窗口中,当子窗口弹开后，父窗口js会等待在这行代码直到子窗口关闭后继续执行到if语句
 if (res != null) {
     alert(res.name);//获取子窗口返回的对象并且访问属性值
 }
//子窗口:
var parentWin = window.dialogArguments;//子窗口中获取父窗口window
parentWin.toolUtils.test("abc");//只有当最后子窗口window.close()；后父窗口的方法才会被执行
window.returnValue = {name:"abc"};//子窗口通过该属性向父窗口返回值

 

18.javascript 只有Error一个异常类，所以只能有一个try catch 去捕获处理异常，由error.message属性来获取异常信息。

     实际编码中常常忽略异常处理，最好能够多写try catch 并向控制台打印，可以避免程序异常退出导致页面一直保持loading或者页面以非常不友好的方式呈现

 

19.对象的地址引用,注意以下场景

 

//弹出窗口
var popupArrList = window.opener.toolUtils.arrList
popupArrList .push("abc");//对象的引用是地址引用，所以在子页面中的list添加属性 其实也就是在操作父页面的list

 

子页面:
var arrList = ["abc","bcd"];
window.opener.toolUtils.updatePageData(arrList);//子页面调用父页面方法更新数据
window.close();//子页面关闭
//以上这种方法在IE下更新数据不会成功，因为子页面关闭后，arrList 数组也随之消亡
//所以父页面方法会获取不到数据

//正确的方法如下
//父页面
var arrListParent = [];
cloneInfo :function(target){//Object对象是地址引用，以下方法是copy基本数据类型，即使子页面关闭后，数组中的数据也不会消亡
      copy = {};
      for(name in target){
             copy[name] = target[name];
      }
      retrun copy;
}

//子页面
var arrList = ["abc","bcd"];
for(i in arrList){
 window.opener.arrList[i] = window.opener.cloneInfo(arrList[i]);
}
window.opener.toolUtils.updatePageData(window.opener.arrList);//子页面调用父页面方法更新数据
window.close();//子页面关闭

 

20. json对象补充:

     a.json基本定义及格式: http://caibaojian.com/json-baike.html

        json parse及stringify : http://my.oschina.net/chape/blog/157332

 

    b. json 对象:

    1.对外， var json = {}，其实就是作为window的成员属性或者某个其他对象里的function属性里的 局部变量进行使用

    2.对内，代码逻辑一定是实现在自身的成员function对象中，并且可以在成员fucntion对象中定义引用其他json对象

    ------ 一个json对象就是直接实例化了一个对象，不像是 Function可以自定义一个类，所以json对象中都是实例属性，没有类属性和局部变量的

    ------ 和new 一个自定义function类的对象一样，都可以动态添加实例成员属性， json.attr = "dynamicAttr";

    ------ 对于一个Object对象，访问其属性可以使用 obj.attr 和 obj[attr] 进行取值和赋值，对于数组来说，属性值就是它的index，所以遍历对象属性或者数组可以使用如下方法:

    for( arrt in obj){

       var value1 = obj[arrt];

       obj[arrt] = value2;

    }

    c.

    var json = {
        attr : {words : "welcome"},
        test : function(){//test  function就是就是Function类的一个对象
                    alert(this.attr.words)//所以在这个成员属性对象中调用本身对象属性得使用this
                }
    }