javaScript 李彦辉

一、最初的javaScript

1、概述

最初是服务器端的语言，用来输入验证。
面向对象、解释型的程序设计语言。基于对象和事件驱动并具有相对安全性的客户端脚本语言。验证数据、加强用户体验。

2、javascript特点

松散型 变量不具有明显的类型
对象属性 javascript中的对象把属性名映射为任意的属性值
继承机制 继承机制是基于原型的
浏览器：
火狐 IE
谷歌 页面简洁 安卓系统的移动浏览器 （开放源代码）
苹果 safari 机器自带浏览器
opera 没有财力雄厚的大公司

3、javaScript的核心

完整的javaScript应该有 核心ECMAScript、文档对象DOM、浏览器核心对象BOM
ECMAScript（与web浏览器没有依赖关系 ）
javascript基本语法、类型、语句、冠军案子、保留字、操作符、对象
我们常见的浏览器只是ECMAScript实现可能的宿主环境之一
DOM： html树 DOM把整个页面映射为一个多层节点结构
1、为什么要使用DOM
DHTML（Dynamic html）的出现使那个编写一个html页面就能够在任何浏览器运行的时代结束，但是如果继续保持web跨平台的天性w3C(word wide web万维网联盟)规划DOM
BOM:浏览器对象，它作为javaScript实现的一部分但是没有相关的标准，但是在h5中解决了
综上所述：javascript有三个不分组成：
1、ECMAScript提供核心语言功能
2、文档对象DOM：提供访问和操作网页的方法和接口
3、浏览器对象BOM：提供与浏览器交互的方法和接口

三、javaScript语法

1、区分大小写
2、标识符组成 第一个字符必须是字母 下划线 美元符号

四、数据类型

typeof 操作符+6大类型

typeof 操作符

1、Undefined 类型 typeof后返回的字符串是 undefined 没有定义的
2、Boolean 类型 typeof后返回的字符串是 boolean 布尔值
3、String 类型 typeof后返回的字符串是 string 字符串
4、Number 类型 typeof后返回的字符串是number 数值
5、Object 类型 typeof后返回的字符串是object 对象 null 空对象
6、function 类型 typeof后返回的字符串是function

undefined类型

申明了但是没有初始化的变量就是undefined。
没有申明直接使用的变量会出错
但是以上两种变量使用了 typeof 变量以后就会都成为undefined

null类型

表示空对象的引用 typeof null 返回object
null表示的没有创建对象的初始化
var box={} 此时的box为null 说明不是空对象，这个对象已经创建
var box=null 这个表示还没有创建对象，但先声明了对象引用而必须初始化的结果 后边使用的时候再初始化
alert(undefined==null) true
alert(undefined===null) false //数据类型必须相等

boolean类型

布尔类型

Number类型

int 和float
int 二进制 八进制 十进制 十六进制

    console.log(070);   //56
    console.log(0x70);    //112

浮点类型
用e来表示过大或者过小的数值
不是数字类型 时为NaN 而且自己和自己也不相等
isNaN

    console.log(isNaN(NaN));    //true
    console.log(isNaN(true));    //false
      console.log(Number(true));   //1
    console.log(Number(25));   //25
    console.log(Number(null));   //0
    console.log(Number(undefined));   //NaN
    var box={toString:function(){
        return  ‘123‘;
    }}
    console.log(Number(box));   //123
    console.log(Number(‘wqwq12‘));   //NaN
    console.log(parseInt(null))     //NaN
    console.log(parseInt(‘1212wqwq12‘))     //1212
    console.log(Number(‘1212wqwq12‘))     //NaN
    console.log(Number(null))     //0

String类型

由0-16个字符来组成 单引号和双引号的意义是一致的
toString()方法
toString()方法可以将数值、布尔型转换成字符串

对象和数组

对象类型：一种引用类型将数据和功能结合在一起
创建对象：
1、 var box=new Object();
2、var box=Object();
3、var box={}; //字面量方式创建对象
4、box.name 或者box[‘name’]
给对象创建方法 box.run=function(){} //这个函数为匿名函数
对象包含哪些元素：1、属性2、方法 属性也可以带着单引号或者双引号
注意：函数的调用一定要有（）
删除对象属性
delete 关键字

  var box=new Object();
  box.name=‘zhaowenjuan‘;
    console.log(box.name);  //zhaowenjuan
    delete  box.name;
  console.log(box.name);  //undefined

但是在实际的开发中比较受欢迎的是字面量的方法来定义对象
对象中 内置的方法
对象或者数组都有toLocalString、toString、valueOf

  var  box=[‘李彦辉‘,23,‘sasa‘];
    console.log(box.toString());   //李彦辉,23,sasa
    console.log(box.valueOf());   //["李彦辉", 23, "sasa"]
    console.log(box.toLocaleString());   //李彦辉,23,sasa

但是这三个方式对日期对象是不一样的

  var  box=[‘李彦辉‘,23,‘sasa‘,new Date()];
    console.log(box.toString());   //李彦辉,23,sasa,Tue May 17 2016 16:06:47 GMT+0800 (中国标准时间)
    console.log(box.valueOf());   //["李彦辉", 23, "sasa", Tue May 17 2016 16:06:47 GMT+0800 (中国标准时间)]
    console.log(box.toLocaleString());   //李彦辉,23,sasa,2016/5/17 下午4:06:47

join()
这个方法调用的意思是将对象中的元素用 **连起来，返回的是一个字符串

  var  box=[‘李彦辉‘,23,‘sasa‘,new Date()];
  console.log(box.join(‘|‘)) ;   //李彦辉|23|sasa|Tue May 17 2016 16:08:34 GMT+0800 (中国标准时间)

操作最后一个元素 push()和pop()
ESMAScript提供了一组让数组的行为类似于数据结构的方法

  var  box=[‘李彦辉‘,23,‘sasa‘,new Date()];
 console.log(box.push(45));  //将任意类型的数据添加到对象末尾，并返回添加后的长度
 console.log(box.pop());  //移除对象的最后一个元素   返回的是被移除的元素

操作第一个元素 shift() 和unshift()

  var  box=[‘李彦辉‘,23,‘sasa‘,new Date()];
 console.log(box.shift());  //  移除对象的第一个元素   返回的是被移除的元素
 console.log(box.unshift(45));  //将任意类型的数据添加到对象开头，并返回添加后的长度

注意：unshift这个由在IE浏览器有兼容性问题 返回的是undefined
排序 reverse() sort()

  var  box=[2121,23,‘sasa‘,‘aa‘];
 console.log(box.reverse());  //   ["aa", "sasa", 23, 2121]
 console.log(typeof box.reverse());  //   返回的是排序后该对象
  console.log(box.sort());  //   [2121, 23, "aa", "sasa"]

sort详解

  var  box=[0,1,10,3,15,2];
  function compare(v1,v2){
      if(v1<v2){
          return -1;
      }
      else if(v1>v2){
          return 1;
      }
      else
      return 0;
  }
    console.log(box.sort());  //[0, 1, 10, 15, 2, 3]
    console.log(box.sort(compare));  //[0, 1, 2, 3, 10, 15]

第一句话 因为sort方法是吧数值当作字符了
slice ()和contact()
contact() 没有改变原的对象

  var  box=[‘sasa‘,121,‘江苏‘];
  var  box2=[‘sasa‘,121,‘江苏‘];
    console.log(box.concat(box2));   //["sasa", 121, "江苏", "sasa", 121, "江苏"]
    console.log(box);   //["sasa", 121, "江苏"]

slice () 没有改变原的对象

  var  box=[‘sasa‘,121,‘江苏‘];
    console.log(box.slice(1));   //[121, "江苏"]从2到末尾
    console.log(box);   //["sasa", 121, "江苏"]

splice()的三中功能
1、删除

  var  box=[‘sasa‘,121,‘江苏‘,‘山西‘];
    console.log(box.splice(0,2));   //["sasa", 121]
    console.log(box);   //["江苏", "山西"]

2、插入

  var  box=[‘sasa‘,121,‘江苏‘,‘山西‘];
    console.log(box.splice(1,0,‘222‘));   //[]   因为没有删除   0表示不删除  当然也可以是非0  就成为了替换的功能
    console.log(box);   //["sasa", "222", 121, "江苏", "山西"]

3、替换

  var  box=[‘sasa‘,121,‘江苏‘,‘山西‘];
    console.log(box.splice(1,1,‘222‘));   //[121]
    console.log(box);   //["sasa", "222", "江苏", "山西"]

函数

function类型实际上是对象，每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针
函数的申明
1、function bb(){}
2、var bb=function(){} //使用变量初始化函数
3、var bb=new Function(){} //使用Function的构造函数

  var  bb=new Function(‘n1‘,‘n2‘,‘return n1+n2‘);
    console.log(bb(1,2));  //3
        console.log(typeof bb);  //function

函数作为参数传递给其他函数

// 函数可以作为参数传递给其他函数
    function bb(sum,num){
        return sum(num)+num;
    }
    function sum(num){
        return num+10;
    }
    console.log(bb(sum,10));  //sum是一个函数而不是返回值，当作参数传递给另一个函数  30

函数自身的属性
arguments和this
求阶乘

   function sum(num){
       if(num==1){
           return 1
       }
       return num*sum(num-1);
   }
    console.log(sum(4));

arguments
利用函数自身的属性来求阶乘

   function sum(num){
       if(num==1){
           return 1
       }
       return num*arguments.callee(num-1);
   }
    console.log(sum(4));

this
window是一个对象 js里边最大的对象，最外围的对象

   console.log(typeof window);   //object
   console.log(this);   //window  因为在window的范围下
   console.log(typeof this);   //object
    var  color=‘red‘;   //这里的color就是全局变量，这个变量有是window的属性   等价于window.color=‘red‘
    console.log(window.color);   //red
    console.log(this.color);   //red

对象里边的color

    var box={
        color:‘blue‘,   //局部变量
        sayColor:function(){
            console.log(this.color);   //this指的是box
        }
   }
   box.sayColor();   //blue

length属性
有多少个参数

     function aa(aa,bb){
         return aa+bb;
     }
      console.log(aa.length);   //2

prototype属性
对于prototype属性，保存所有实例方法的真正所在，也就是原型
有两个方法 apply() call() 每个函数都有这个方法
apply()方法 传递的必须是一个this 和一个数组

     function aa(aa,bb){
         return aa+bb;
     }
    function sum(num1,num2){
        return aa.apply(this,[num1,num2])  //this表示window作用域,[]表示传递的参数
    }
    console.log(sum(10,10));

这样sum就冒充了aa的函数

 function aa(aa,bb){
         return aa+bb;
     }
    function sum(num1,num2){
        return aa.apply(this,arguments)  //this表示window作用域,[]表示传递的参数
    }
    console.log(sum(10,10));

这样也是正确的
call()方法 传递的必须是一个个的参数

     function aa(aa,bb){
         return aa+bb;
     }
    function sum(num1,num2){
        return aa.call(this,num1,num2);
    }
    console.log(sum(10,10));

这两个都是用来改变作用域

 var color=‘red‘;
    var box={
        color:‘蓝色的‘
    }
    function sayColr(){
        console.log(this.color);
    }
    //用call来实现对象冒充  冒充box下，冒充window下
    sayColr.call(window);      //冒充window   red 
    sayColr.call(this);  //冒充window  red
    sayColr.call(box);   //冒充box   蓝色的 

变量作用域及内存

变量类型：基本类型和引用类型
基本类型值：保存在栈内存的简单数据段，完全保存在内存中的一个位置
引用类型值：保存在堆内存中的指针 变量中指保存的是一个指针
基本类型：undefined null boolean number string 按照值来访问特别值得注意的是string是基本类型
引用类型：object 按照存储的地址来访问 也就是按引用来访问
动态属性：

 var  box=new Object();
    box.name=‘lee‘;   //基本类型值   name就是一个动态属性
    console.log(box.name);

复制变量
基本类型的复制了两个版本 完全独立的
引用类型的复制传递的是地址 只有一个具体的对象 指的是一个对象，改变会影响彼此
参数传递：
js中所有的参数都是按值来传递的，没有按引用传递的

     function box(obj){
         obj.name=‘lee‘;
         var obj=new Object();
         obj.name=‘kkk‘;
     }
    var obj=new Object();
    box(obj);
    console.log(obj.name);    //lee    js没有按引用传参的功能，

检测类型
检测一个变量的类型
使用typeOf 检测基本类型，但是对于引用类型typeof返回的都是object
使用instanceof 来检测引用类型

      var box=[1,2,3];
      console.log(typeof box);  //object
      console.log(box instanceof Array);   //true
      var ss=‘aa‘;   //这是一个字符串
     var ss1=new String(‘aaa‘)   //这是一个对象

作用域和内存
作用域链：当代码在一个环境中执行时，就会形成一种叫做作用域链的东西

基本包装类型

基本包装类型：为了便于操作基本类型
ECMAScript提供了3种特殊的引用类型 Boolean Number String

String

1、基本包装类型的实例
是基本类型，但是是特殊的实例 可以调用系统内置的方法

      var  box=‘sasa2121‘;    //这是一个基本类型
    console.log(typeof box);
    console.log(box.substring(2));  //这明显是一个引用的方法的调用 只有对象才有方法
        console.log(‘sasa212133‘.substring(2));  //字符串本来就是基本包装类型

注意：基本类型是无法给自己添加属性和方法，但是可以使用系统自带的方法，不能添加自定义的方法
2、new运算符
这种使用new出来的对象自定义方法和属性都是有效的，内置的方法也是有效的

    var  box=new String(‘sasa2121‘);    //这是一个基本类型
     box.name=‘lee‘;    //给对象加属性
    box.age=function (){   //给对象加方法
        return 100;
    }
    console.log(box.name);     //lee
    console.log(typeof box);   //object

同样的原理类似于Boolean Number
属性
length：返回字符串的长度
constructor：返回创建string对象的函数
prototype：添加属性和方法来扩展字符串定义

var box=‘sasas‘;
    console.log(box.length);   //5
    console.log(box.constructor);   //String() { [native code] }

方法
字符

var box=‘sasas2122‘;
   console.log(box.charAt(2));   //返回指定下标的值  s
   console.log(box.charCodeAt(2));   //返回的是s的ascii码 115

操作

var box=‘sasas2122‘;
   console.log(box.concat(‘is‘,‘sa‘));   //连接    sasas2122issa
   console.log(box.slice(4,6));   //截取    s2
   console.log(box.substring(4,6));   //截取    s2
   console.log(box.substr(4,6));   //截取   s2122  从第4个开始选6个
   //传递一个负数
   console.log(box.slice(-3));   //9+（-3）=6从第6位开始  截取  122
   console.log(box.substring(-3));   //负数返回全部 sasas2122
   console.log(box.substr(-3));   //9+（-3）=6从第6位开始  截取  122
    //传递两个数
    console.log(box.slice(2,-1));   //9+（-1）=8  从第2位到第8位  截取  sas212
    console.log(box.slice(-2,-1));   //从第7位到第8位  截取 2

位置处理

var box=‘sasas2122‘;
   console.log(box.indexOf(‘s‘));   //0
   console.log(box.indexOf(‘s‘,3));   //4   从前向后搜索
   console.log(box.lastIndexOf(‘s‘));   //4   从后向前搜索

大小写转换

var box=‘sasa‘;
   console.log(box.toLocaleLowerCase());   //sasa
   console.log(box.toLocaleUpperCase());   //SASA
   console.log(box.toLowerCase());   //sasa
   console.log(box.toUpperCase());   //SASA

字符串匹配模式

var box=‘sasa‘;
  console.log(box.match(‘s‘));   //["s", index: 0, input: "sasa"]
  console.log(box.search(‘s‘));   //0
  console.log(box.replace(‘s‘,‘q‘));   //qasa
  console.log(box.split(‘s‘));   //["", "a", "a"]  按照s将字符串分割成数组

Number

静态属性
Number的静态属性，直接通过类名来调用的属性

 console.log(Number.MAX_VALUE); //静态属性
    var  box=100;
    console.log(box.MAX_VALUE);    //undefined   属性

内置方法

     var box=10000;
    console.log(box.toString());  //string   10000
    console.log(box.toLocaleString());  //本地化数字转换为字符串 10，000
     var  bb=0.12122
    console.log(bb.toFixed(2));  //0.12

js内置对象

global对象和math对象
内置对象：由ECMAScript实现提供的、不依赖宿主环境（浏览器）的对象。这些对象在ECMAScript程序执行之前就已经存在了。不需要程序员实例化。

global对象

全局对象，这个对象不存在。ECMA中不属于其他任何对象的属性和方法，都属于这个global的属性和方法
global对象的方法
1、URI编码 可以对链接中的非标准字符进行编码，以便发送给浏览器

    console.log(encodeURI(‘//Lee里‘));   ////Lee%E9%87%8C  对/  ? #等特殊符号不编码
      console.log(decodeURI(encodeURI(‘//Lee里‘)));   ////Lee里
      console.log(encodeURIComponent(‘//Lee里‘));   //%2F%2FLee%E9%87%8C
      console.log(decodeURIComponent(encodeURIComponent(‘//Lee里‘)));   //Lee里
      //console.log(global);  //会报错，证明根本没有这个对象

2、担当解析的作用

   eval(‘console.log(111)‘);   //会在控制台输出111

但是这个函数比较危险，因为这个函数会直接执行。
global对象的属性
就是不属于任何对象的属性都属于global

Math对象

ECMAScript保存数学公式
属性
e pi 等
方法

    console.log(Math.min(1,4,6));  //1
    console.log(Math.max(1,4,6));  //6
    console.log(Math.ceil(25.1));  //26
    console.log(Math.ceil(25.9));  //26
    console.log(Math.floor(25.9));  //25
    console.log(Math.round(25.1));  //25
        console.log(Math.random()*10);  //产生0-1的随机数，但是不包含0-1的随机数

当然也包含其他的平方根 绝对值 等的函数

面向对象与原型

ECMAScript有两种开发模式：1、过程 2、对象（类的概念）
通过类创建大量的对象的方式：
1、工厂模式：创建一个集中实例化的函数

    function createObject(name,age){
         var obj=new Object();   //创建对象
         obj.name=name;      //添加属性
         obj.age=age;        //添加方法
         obj.run=function(){
             return this.name+this.age+"运行中";
         }
         return obj;    //返回对象引用
     }
    var cc=createObject(‘Lee‘,300);     
    var bb=createObject(‘Lee‘,100);
    console.log(cc.run());    //Lee300运行中
     console.log(bb.run());    //Lee100运行中

但是这种方式没有办法识别是那个对象的实例
2、构造函数创建

     function createObject(name,age){
         this.name=name;      //添加属性
         this.age=age;        //添加方法
         this.run=function(){
             return this.name+this.age+"运行中";
         }
     }
    var cc=new createObject(‘Lee‘,300);
    var bb=new createObject(‘Lee‘,100);
    console.log(cc.run());    //Lee300运行中
     console.log(bb.run());    //Lee100运行中

工厂模式和构造函数的区别：
1、 构造函数没有new object 但是后台会自动的调用一个new object
2、构造函数中this就相当于obj
3、构造函数不需要返回对象的引用
4、使用构造函数生成对象的时候必须new 构造函数
5、构造函数也是函数

原型

每一个函数都有prototype的属性，这个属性也是一个对象，用途是包含可以由特定类型的所有实例共享的属性和方法
实例方法和属性方法不同的实例化，他们的方法地址是不一样的，是唯一的。‘
原型方法，那么他们的地址是共享的，所有通过这个原型生成的对象的方法的引用都是一致的

  //原型
    function createObject(){}
    createObject.prototype.name=‘Lee‘;    //原型属性
    createObject.prototype.age=100;
    createObject.prototype.run=function(){
        return this.name+this.age+‘运行中‘;
    }
    var bb=new createObject();
    console.log(bb.run());
    console.log(bb.prototype);  //这个属性是一个对象，访问不到   undefined
    console.log(bb.__proto__)   //这个属性是一个指针，指向prototype原型对象
    console.log(bb.constructor)   //可以获取构造函数本身，
    // 作用是被原型指针定位，得到构造函数本身，其实就是构造函数对应的原型对象
    //判断一个对象实例（对象引用）是不是指向了原型对象，基本上只要实例化了自动指向他的原型对象
    console.log(createObject.prototype.isPrototypeOf(bb));   //true

原型的自变量