js学习笔记

JavaScript -学习笔记

 

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

    window - screen

                 - history

                 - location

                 - navigation

                 - frames

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

                 - 直接定义在文档内的object -- 1.实例化的自定义类对象，2.实例化的内置类对象(Array,Date,Error,Math,Number,Object,String，Function), 3.直接定义的Function对象，就是定义一个命名函数,函数比较特殊所以从内置对象中单独提出说明下

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

 

 2.自定义类及对象

    a.自定义类及声明的对象都是属于window顶层对象 

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

    }

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

    var f = new Class();

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

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

 

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

    c.var myObj = {

                              var name : "abc",

                              var f : function(arg){}

                           }

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

    d.伪继承机制 --javascript没有真正的类继承，实质是对原有类进行修改

       function Class(){

            var member1 = "member1";

            function1 = function(arg){};

       }

       var c1 = new Class();

       var c2 = new Class();

       Class.prototype.function2=function(){};

      这是c1和c2对象都拥有了fucntion2成员函数

    e.通常会将自定义的对象单独存放一个文件，引入html页面

    

 3.Function 类

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

    b.3种定义函数方式：

       1.定义命名函数 -- 只能直接用于在文档内，也就是只能作为window成员属性或者自定义类去使用

          function functionName(arg){}

          window --只能用于在window对象下：

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

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

       2.匿名函数

         function(arg){}

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

         自定义类中:参见上面提到的3中自定义类中，都使用匿名函数定义了成员函数

       3. 如下这种方式推荐使用

           var f = new Function("abc","document.writeln('name:' + name)");//从第一个参数是 自定义函数的传入参数，最后一个数函数执行体

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

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

 

3.正则表达式

   使用方法：/ /中间包含匹配输入及通配符 -- "^" 匹配以输入开始并且以$匹配以输入结束, $/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处理

 

4. == 和 ===

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

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

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

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

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

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

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

       b. ===类型不同， false

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

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

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

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

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

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

 

6.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

 

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

 

Java代码  

1. with(document){  
2.        document.writeln("a");  
3.        document.writeln("a");  
4.        document.writeln("a");  
5. }  

  

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

   8.1 打开子窗口

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

 

Js代码  

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

  

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

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

 

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

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

       

Js代码  

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

 

 b.样例：

Js代码  

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

 

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

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

 

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

 

Js代码  

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