Javascript高级程序设计

JavaScript高级程序设计

• 变量,作用域和内存问题

  • object类型值的引用赋值

     var obj1 = new Object();
     var obj2 = obj1;
     obj1.name = 'za'
     //obj2.name = za
    

  • 函数参数全部都是值传递

  • typeof|instanceof

     typeof(a);
     a instanceof b;
    

  • JS没有块级作用域(所以if或者for中的变量可以在之后继续调用)

  • 局部变量的优先级高于全局变量的优先级

  • 作用域(scope)和作用域链(scope chain)

  • 自动垃圾回收机制(标记清除类型 | 引用计数)

  • 设置对象的值为null来手动解除引用

• 引用类型

  • 大部分引用类型是Object的

     var a = {a:b,c:d}
    

  • Array

    • array.length
    • isArray
    • 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"
      

prototype.png

   - `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的prototype

      function 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

prototype_chain.png

- 所有的原型都继承于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对象
• DOM

  • 5个常用的DOM方法:

    • getElementById
    • getElementByTagName
    • getElementByClassName
    • 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.write
    • innerHTML
    • creatElement 创建元素
    • createTextNode 创建文本节点
    • appendChild append 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()函数转化值

typeof.png

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