• JS


    一、RegExp对象 

    1、创建正则表达式:

    var patt=new RegExp('javascript');
        var res=patt.test('this is a javascript course');
        console.log(res);
     pattr='/javascript/i';//表示忽略大小写
        res=patt.test('this is a javascript course') 
        console.log(res)

    2、[]表达式

    var res= /[abc]/.test('blue');
    res=/[^abc]/.test('lue')

    3、元字符   

    var res=/./.test('
    ');
    //    元字符. 匹配不换行
    var res=/w/.test('this is a blue')
    w 是0-9  a-z  A-Z   W是除了前面的这些
    //        s表示空白字符  S 非空白字符
          var res=/s/.test('hello world!')
    //    代表单词的边界
        var res=/good/.test('this is good one');

    4、量词

    //    +表示至少出现一次
        var res=/o+/.test('good');
        console.log(res)
    //    *表示0 1或者多次
        var res=/o*/.test('goodle');
    //    ?表示0或者1次
        var res=/o?/.test('goodle');
    //    {}指定多少次
        var res=/o{2}/.test('goodle')
    //        ^开头  $结尾
        var res=/^good$/.test('good);
    var res=/o(?=w)/.test('helloworld'); //o后面紧跟着w
    var res=/o(?!w)/.test('helloworld'); //o后面不紧跟着w
    //    d表示数字  D表示非数字
          var res=/d/.test('1032')

    5、exec可以返回一个数组形式的结果

    var res=/is/ig.exec('this is a test');
        console.log(res)
        console.log(res[0])
     

    6、match

    结果为一个数组
    var
    str='this is a test' res=str.match(/IS/ig) console.log(res)

    7、search

    结果表示有2个
    var
    str='this is a test!!!' res=str.search(/is/ig) console.log(res)

    8、replace

    var str='this is a test!!!'
        res=str.replace(/is/ig,'!!!')
        console.log(res)

    9、分组匹配

     var str='2017-09-27'
        res=str.replace(/(d{4})-(d{2})-(d{2})/,'$2/$3/$1');
        console.log(res)

    10、split拆分

    var str='this is a test';
            var  res=str.split(/s+/);
            console.log(res);

    二、Error对象

    Error与try catch一起调用

    try{
            var n=0;
            if(n==0){
                throw new Error('0不能被当做除数');//主动弹出一个错误信息
            }else{
                alert(4/n);
            }
        }catch (e){
            alert(e.name+':'+e.message);
        }finally {
            alert('我总是被调用')
        }

    区分不同的错误类型

    try{
            
        }catch (e){
            if(e instanceof EvalError){
                alert(e.message)
            }else if(e instanceof RangeError){
                alert(e.message)
            }else if(e instanceof ReferenceError){
                alert(e.message)
            }else{
                alert('其他错误')
            }
        }

    自定义错误

    function MyError(msg) {
            this.name='MyError'
            this.message=msg||'默认的自定义错误信息'
        }
        MyError.prototype=Object.create(Error.prototype);
        MyError.prototype.constructor=MyError;
        try{
            throw new MyError();
        }catch (e){
            console.log(e.name+":"+e.message);
        }
        
        try{
            throw new MyError('测试自定义的错误信息')
        }catch (e){
            console.log(e.name+":"+e.message);
        }

    三、数组对象

    1、创建数组

     var arr=[]
        var arr1=new Array();
        var arr2=new Array(5);

    2、操作数组

     var arr=[1,2,3,4,5,6]
        arr[0]='king'//修改数组

    3、常用方法

    //join将数组转换成指定字符链接符
    var arr=['a','b','c','d'];
        var res=arr.join('--');
        console.log(res);
    //反转
    var arr=['a','b','c','d'];
    console.log(arr.reverse())
    var arr=[1,3,23,112,351,31,33];
        console.log(arr.sort(function (a,b) {
            return a-b;//表示从小到大   如果return b-a表示从大到小
        }))
       var arr=[
            {name:'king', age:23},
            {name:'kkblue', age:59},
            {name:'gavin', age:64},
            {name:'tom', age:3}
        ];
        arr.sort(function (a,b) {
            if(a.name>b.name) return 1;
            if(a.name<b.name) return -1;
            return 0;
        });
        for(var i in arr){
            console.log(arr[i]);
        }
    //合并数组
    var arr=[1,2,3];
        console.log(arr.concat([4,5,6,7]))
    //    切割
        var arr=['a','b','c','d','e','g','h','i'];
        res=arr.slice(0,3);
        console.log(res);
        res=arr.slice(0,-3);
        console.log(res);
    var arr=['a','b','c','d','e','g','h','i'];
        res=arr.splice(0,1);//从0开始到1删除
        console.log(res);
        console.log(arr);
        res=arr.splice(5);//从index 5开始删除
        console.log(res);
        console.log(arr);
        res=arr.splice(0,2,'!','?','#')//从index 0开始到index 2替换为 !? # 
        console.log(res);
        console.log(arr);
    var arr=['a!','b!','c!','D','E'];
          var res= arr.map(function (t) {
              return t.replace(/!/g,'?').toUpperCase();
          });
          console.log(res)
    var arr=[1,2,3,4,32,314,null,undefined,false,'',true];
        res=arr.filter(function (t) {
            return t<=10;
        })
        console.log(res);
        res=arr.filter(function (t) {
            return t%2==0;
        });
        console.log(res);
        res=arr.filter(function (t) {
            return t!==undefined && t!=null;
        });
        console.log(res);

     map、filter 、reduce、every、some概念对比:

    map:

      主意对数组内元素进行操作,举例说明:

    var attr=[1,2,3,4,5,6,7]
        var res=attr.map(function (t) {
            return t*2;
        })
        console.log(res)

    filter:

      filter操作是对数组内元素进行过滤操作,符合条件的可以被过滤出来

    var attr=[1,2,3,4,5,6,7]
        var res=attr.filter(function (t) {
            return t>3;
        })
        console.log(res)

    reduce:

      reduce是个累加器,会接收两个元素,然后将结果与第三个元素再进行操作,一直到数组结束为止

    res=attr.reduce(function (p1,p2) {
            return p1*p2+1
        })

    every和some:

      every和some都会返回true或false,其中every需要数组元素都满足才返回true,而some只要有一个元素满足条件就返回true

    var res=attr.every(function (t) {
            return t>1;
        })
        console.log(res)
    var attr=[1,2,3,4,5,6,7]
        var res=attr.some(function (t) {
            return t>1;
        })
        console.log(res)

    indexOf与lastIndexOf:

    可以查找是否在数组中,如果找到会返回index值,如果没有找到会返回 -1,通过这个可以判断元素是否在数组中,里面包括两个参数,第一个是要查找的元素,第二个是从哪个位置开始查找

    Array.isArray():

    判断是否是一个数组

    toString():

      toString和join一样都是连接字符串,但是和join不一样的地方在于它只能通过,来连接

    三、事件

      JS是通过事件来与网页进行交互的。

    事件包括以下几部分:

    1、事件类型:是一个用来说明发生什么类型事件的字符串,像鼠标悬停,按下键盘等,也可以把事件类型叫做事件名字,用特定的名字来标识所讨论的特定类型的事件

    2、事件目标:事件目标是发生事件或者与之相关的对象,当讲事件时,我们必须同时指定类型和目标,像window的load事件或者链接的click事件,在客户端js应用程序中,window,document,和Element对象是最常见的事件目标,但是某些事件也是右其他类型的对象触发的

    3、事件处理程序:用户在页面中进行点击这个动作、鼠标移动的动作,网页页面加载完成的动作等,都可以称为事件名称即click   mousemove  load等都是事件的名称,响应某个事件的函数称之为事件处理程序,或者事件侦听器

    4、事件对象:是与特定事件相关且包含有关事件详细信息的对象、事件对象作为参数传递给事件处理程序函数,所有事件对象都有用来指定事件类型的type属性和指定事件目标target属性,每个事件类型都为其相关事件对象定义一组属性

    5、事件传播:浏览器决定那个对象触发⑦某个事件处理程序

    事件类型:

    1、内联模型

    <input type="button" onclick="alert('hello ')" value="点击">

    2、脚本模型

    脚本模型是为了解决html与js没法分离的问题,但是脚本模型没法执行多个事件处理程序,这个需要DOM2的事件来完成

    <input type="button" value="脚本模型1" id="btn1">
    <script>
        
        btn1=document.getElementById('btn1');
        btn1.onclick=function () {
            alert('hello2')
        }
    </script>
    //直接赋值不需要加括号
    function test2() {
            alert('hello3')
        }
        btn2=document.getElementById('btn2');
        btn2.onclick=test2
    var btn3=document.getElementById('btn3');
        var count=0;
        btn3.onclick=function () {
            alert(count++);
            if(count===3){
                btn3.onclick=null;//dom取消需要将它重新复制为Null就可以了
                
            }
        }

    3、DOM2模型

    addEventLisnter()与removeEventLisnter()W3C与IE9以后支持

    attathEvent()     detachEvent()     IE8支持

     需要注意的是:

      IE中通过e获取不到,需要window.event来获取事件

    <body>
    <input type="button" value="dianji" id="btn1">
    <script>
        var btn1=document.getElementById('btn1');
        btn1.onclick=function (e) {
            e=e||window.evnet;//IE中通过e获取不到,需要window.event来获取事件
    
        }
    </script>
    </body>

    事件流:

    从页面中接收事件的顺序

    冒泡:从里往外   大部分浏览器都支持冒泡

    捕获:从外往里

    <div id="div1" style="background:#ABCDEF;300px;height:100px;">
        <input type="button" value="dianji" id="btn1">
    </div>
    <script>
        var btn1=document.getElementById('btn1');
        var box1=document.getElementById('div1');
        btn1.onclick=function () {
            alert('btn1 ')
        }
        box1.onclick=function () {
            alert('box1')
    
        }
        document.body.onclick=function () {
            alert('body')
    
        }
        document.documentElement.onclick=function () {
            alert('html')
        }
        document.onclick=function () {
            alert('document')
        }
    
    </script>
    冒泡

    取消冒泡:

    btn1.onclick=function () {
    alert('btn1 ');
    var e = e||window.event;
    if(typeof e.cancelBubble ==undefined){
    e.stopPropagation();//取消冒泡
    }else{
    e.cancelBubble=true;//IE取消
    }


    }

    addEventListener(x,x,x)和removeEvenetListener(x,x,x)

      addEventListener包括三个参数,第一个是事件名,第二个是函数,第三个是false或者true,其中false表示冒泡

    var btn1=document.getElementById('btn1');
        var box1=document.getElementById('div1');
        btn1.addEventListener('click',function () {
            alert('button clicked')
        },false)//addEventListener包括三个参数,第一个是事件类型,第二个是函数,第三个是false或者true,其中false表示冒泡
        box1.addEventListener('click',function () {
            alert('div clicked')
    
        },false)
        document.body.addEventListener('click',function () {
            alert('body clicked')
            
        },false)
        document.documentElement.addEventListener('click',function () {
            alert('html')
        },false)
        document.addEventListener('click',function () {
            alert('document click')
    
        },false)
    var btn2=document.getElementById('btn2');
        var count=0;
        var handler1=function () {
            alert(count++);
            if(count==3){
                alert('事件被取消')
                btn2.removeEventListener('click',handler1,false);//如果想取消必须定义函数不能使用匿名函数
            }
            
        };
        btn2.addEventListener('click',handler1,false)

    attachEvent(x,x)和detachEvent(x,x)

    只包含两个参数,事件名与函数名,其中click需要写成onclick

     在IE8中需要使用window.event.cancelBubble=true来取消事件冒泡

    夸浏览器的处理事件函数

    var EventUtil={
        addHandler:function (element,type,handler) {
            if(element.addEventListener){
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler)
            }else{
                element['on'+type]=handler
            }
        },
        removehandler:function (element,type,handler) {
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;
            }
            
        }
        
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./EventUtil.js"></script>
    </head>
    <body>
    <input type="button" id="btn1" value="bangding">
    <input type="button" id="btn2" value="yichu">
    <script>
    //    绑定
        var btn1=document.getElementById('btn1');
        function test() {
            alert('hello king!');
        }
        EventUtil.addHandler(btn1,'click',test);
    //    移除绑定
        var btn2=document.getElementById('btn2');
        function test1() {
            EventUtil.removehandler(btn1,'click',test)
        }
        EventUtil.addHandler(btn2,'click',test1);
    </script>
    </body>
    </html>

    判断行为类型与取消默认行为

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <input type="button" value="tijiao" id="btn1">
    <br>
    <a href="https://wwww.baidu.com" id="btn2">点击</a>
    <script>
        var btn1=document.getElementById('btn1');
        btn1.addEventListener('click',function () {
            alert('click')
        },false);
        btn1.addEventListener('mouseover',function (e) {
            e.target.style.backgroundColor='red';
        },false);
        btn1.addEventListener('mouseout',function (e) {
            e.target.style.backgroundColor=''
    
        });
        btn2.addEventListener('click',function (e) {
            e.preventDefault();//取消默认行为
         //如果是在IE8中,需要使用window.event.returnValue=false 来取消默认行为
    }) </script> </body> </html>

    eventPhase属性:

      W3C中

      捕获阶段调用事件处理程序:eventPhase=1

      处于目标对象上:eventPhase=2

      冒泡阶段调用事件处理程序:eventPhase=3

      IE8中

      使用window.event.srcElement来获取行为阶段

     统一行为处理函数:

    var EventUtil={
        addHandler:function (element,type,handler) {
            // 添加事件
            if(element.addEventListener){
                element.addEventListener(type,handler,false)
            }else if(element.attachEvent){
                element.attachEvent('on'+type,handler)
            }else{
                element['on'+type]=handler
            }
        },
        removehandler:function (element,type,handler) {
            // 取消事件
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent('on'+type,handler);
            }else{
                element['on'+type]=null;
            }
            
        },
        getEvent:function (event) {
            // 获取事件
            return event?event:window.event;
        },
        getTarget:function (event) {
            return event.target || event.srcElement;
    
        },
        preventDefault:function (event) {
            // 取消默认行为
            if(event.preventDefault){
                event.preventDefault()
            }else{
                event.returnValue=false;
            }
    
        },
        stopPropagation:function (event) {
            // 取消冒泡
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
        
    };
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="./EventUtil.js"></script>
    </head>
    <body>
    <input type="button" value="tijiao" id="btn1">
    <br>
    <a href="https://www.baidu.com" id="btn2">dianji</a>
    <div id="div1" style="300px;height:300px;background:#ABCDEF"><input type="button" value="冒泡" id="btn3"></div>
    <script>
        var btn1=document.getElementById('btn1');
        EventUtil.addHandler(btn1,'click',function (event) {
            event=EventUtil.getEvent(event);
            var target=EventUtil.getTarget(event);
            alert(target.tagName);
        });
    
        var btn2=document.getElementById('btn2');
        EventUtil.addHandler(btn2,'click',function (event) {
            event=EventUtil.getEvent(event);
            EventUtil.preventDefault(event);//阻止默认行为
        })
        var btn3=document.getElementById('btn3');
        EventUtil.addHandler(btn3,'click',function (event) {
            event=EventUtil.getEvent(event);
            alert('click');
            EventUtil.stopPropagation(event);//阻止冒泡
    
        })
    </script>
    </body>
    </html>
    测试统一行为

     

    五、表单验证

      参见 http://validform.rjboy.cn/ 

    六、特殊函数

    1、私有函数

    为了防止某些变量泄漏采用私有函数方式,外界无法看到函数的值

    <script>
        function a(p) {
            var b=function (e) {
                return e+10
            };
            return b(p);
    
        }
        console.log('私有函数:',a(14))
    </script>

    2、返回函数的函数

    function a() {
            alert('aaaa');
            return function () {
                alert('bbbb')
            }
    
        }
        var func=a();
        func()

     3、扩展性

    所有的内置对象和自定义对象都是显示可扩展的,宿主对象的可扩展性由JS引擎定义的

    Object.isExtensible()检测是否可扩展的,也可以通过Object.preventExtensitions()变为不可扩展,同时注意,变为不可扩展的话,不能再变为可扩展的

    var obj={};
        console.log(Object.isExtensible(obj));

    变为不可扩展的

    var d={};
        d.x=2;
        Object.preventExtensions(d);
        d.y=3;
        console.log(d);

    Object.seal()能将对象设置为不可扩展外,还能将对象的所有自身属性都变为不可配置,也就是说不能给这个对象添加新的属性,并且它已有属性也不能添加和配置,不过他的已有属性可读属性依然可以配置,通过Object.isSealed()检测对象是否封闭

      var obj={
            x:1,
            y:2,
            username:'gavin'
        };
        obj.age=22;
        delete obj.x;
        console.log(obj);
        var o=Object.seal(obj);
        console.log(Object.isExtensible(obj));
    obj.y=55;//原有的属性仍然可以修改 console.log(obj.y); Object.defineProperty(obj,'username',{ get:function () { return 'this is a test' } });//会报错:不能重新定义username,因为它已经seal了 console.log(obj.username); o.z=77;//没法添加成功 console.log(o.z); Object.defineProperties(obj,'username',{ value:'queen' });//没法修改 console.log(Object.isSealed(o))





    ===========================================================
    console.log(Object.getOwnPropertyDescriptor(obj,'username'));//检测username属性
     

    Object.freeze():

    除了对象设置为不可扩展和将其属性设置为不可配置外,还可以将他自身所有数据属性设置为只读,如果对象存储器属性具有setter方法,存储器属性不受影响,仍然可以通过属性赋值赋值给他们,Object.isFroze()检查是否冻结

    数据封装对象包括:

    Object对象

    Object.prototype

    Number

    Boolean

    String

    Array

    Function

    七、Object对象

    定义:Object是js中所有对象的父级对象,我们创建的所有对象都继承于此,包括内建对象

    语法:new Object()或者{name:value}

    属性:

      Object.create()

          Object.defineProperty()

          Object.definProperties() 在一个对象上添加或修改一个或多个自有属性,并返回对象

          Object.keys()

         Object.getOwnPropertyNames()返回一个由指定对象的所有自身属性的属性名组成的数组,这其中包括不可枚举的

          Object.getOwnPropertyDescriptor(obj, prop)返回指定对象上一个自有属性对应的属性描述符,两个参数,第一个是哪个对象,第二个是这个对象的哪个属性

      

    var obj={get foo() {
            return 123
        }};
        console.log(Object.getOwnPropertyDescriptor(obj,'foo'));
    
        obj={
            name:'gavin',
            age:18
        };
        console.log(Object.getOwnPropertyDescriptor(obj,'name'));
    obj={}
        Object.defineProperty(obj,'test',{
            value:'this is a test',
            writable: false,
            enumerable:false,
            configurable:true
        });
        console.log(Object.getOwnPropertyDescriptor(obj,'test'))
    var obj1={x:1}
        var obj2=Object.create(obj1);
        console.log(Object.getOwnPropertyDescriptor(obj2,'x'));//没法查找,因为这个命令只能查看到它自身的属性,而不是继承过来的属性

    可以通过下面的命令来得到obj2的属性与值:

    console.log(Object.getPrototypeOf(obj2)==obj1);

      Object.getPrototypeOf():返回指定对象的原型,也就是该对象内部属性[Prototype]的值

      Object.prototype:

      所有对象都继承了Object.prototype的方法和属性,尽管他们可能被覆盖

      属性:

        Object.prototype.constructor返回一个指向创建了该对象原型的函数引用

    var obj3=new Object();
        console.log(Object.constructor==Object);

        Object.prototype.hasOwnProperty()检测某个对象是否含有指定的自身属性

        Object.prototype.isPrototypeOf() 检测一个对象是否存在于另一个对象的原型链上

        Object.prototype.propertyIsEnumerable():检测指定的属性是否是当前对象可枚举的自身属性

        Object.prototype.toString()返回一个代表该对象的字符串   

    //可以简写
    var toString=Object.prototype.toString;
        console.log(toString.call(new Date));
        console.log(toString.call(Math));

        Object.prototype.valueOf()返回的是this值,即对象本身

    var obj={x:1};
        console.log(obj.valueOf());

    八、Number对象

      语法:new Number()

    console.log(Number.MAX_VALUE);
        console.log(Number.MIN_VALUE)
        console.log(Number.NaN);
        console.log(Number.NEGATIVE_INFINITY);
        console.log(Number.POSITIVE_INFINITY);
        console.log(Number.isNaN(NaN));
        console.log(Number.isNaN(Number.NaN));
        console.log(Number.isNaN('NaN'));

    toFixed()返回一个字符串,以定点数的形式来表达某个数字,并进行四舍五入

    var n = 12345.5665;
        console.log(n.toFixed(2));//保留2位小数
        console.log(n.toFixed(12));//会不够位数补零

    toExponential()返回要给字符串,以指数形式来表达某一个数字

    var x1=77.1234;
        console.log(x1.toExponential());
        console.log(x1.toExponential(2));

    toPrecision()返回一个字符串,即可以是指数型,也可以是小数型

    九、Boolean对象

    语法new Boolean()

    var b=new Boolean();
        console.log(typeof b);
        console.log(b.valueOf());
        console.log(typeof b.valueOf());
        var c=new Boolean(0);
        console.log(c);

    十、String对象

       new String(s) 构造函数

       function String(s)转换函数

    //    第一个表示字符串
        var n='gavin';
        console.log(typeof n);
    //    第二个是string函数
        var n=String('gavin');
        console.log(typeof n);
    //    第三个是string对象
        var n=new String('gavin');
        console.log(typeof n);

    string对象和string函数是有区别的

      方法:

      String.charAt(n) n代表索引值,表示取得一个字符串的第n个字符,希望返回的字符在字符串string中的索引,返回值是字符串string的第n个字符

        注意:返回字符串的起始点为0,如果不在该字符串长度返回内会返回空字符串

    var k=new String('gavin');
        console.log(k.charAt(0));
        console.log(k.charAt(1));
        console.log(k.charAt(2));
        console.log(k.charAt(3));
        console.log(k.charAt(10));

        String.charCodeAt()返回指定字符的ASCII值

    var a=new String("this is a test");
        console.log(a.charCodeAt(0))
        console.log(a.charCodeAt(2))
        console.log(a.charCodeAt(5))
        console.log(a.charCodeAt(10));

      String.fromCharCode()根据指定ASCII返回对应的字符

    console.log(String.fromCharCode(117));
    console.log(String.fromCharCode(65,69,73));

     String.concat()链接字符串

    var str='hello';
        console.log(str.concat(' world'))
    console.log(str.concat(' world','kkkkkk','!!!'))

    String.indexOf()查找的字符串位置,返回的字符串首次所在位置,没有的话返回-1

    var atr='this is a test!';
        console.log(atr.indexOf('!'));
    //查看a出现的次数
    var str='aslajfaldfefalfajfelafelafe';
        var pos=str.indexOf('a')
        var count=0;
        while(pos!=-1){
            count++;
            pos=str.indexOf('a',pos+1);
    
        }
        console.log(count);

    String.localCompare()比较字符串

    console.log('k'.localeCompare('z'));

    String.math():找到一个或多个正则表达式的结果

    var str='this is a test!';
        var re=/is/ig;
        console.log(str.match(re));
        var str='QWEQWQW!#O!#@E!@#O!JEJ!#@E!@#jafdewiaeefqwefoeqer';
        console.log(str.match(/[a-f]/ig))

    String.search()根据正则表达式进行搜索

    var str='this is a seaisrch!';
        console.log(str.search(/is/i));

    String.replace()替换

    var str1="this is a test";
        var res=str.replace(/is/ig,'KKK');
        console.log(res)

    String.slice()截取

    var str='abcedf';
        var res=str.slice(2)
        console.log(res);//从2开始截取全部
        console.log(str.slice(0,2));//从0开始截取到2为止

    String.split()将字符串拆分成数组,其中包括两个参数,第一个是以谁来差分,第二个是取几部分

    var str='2017-09-12';
        var arr=str.split('-')
        console.log(arr)

    String.toUperCase()    String.toLowerCase()  

    console.log('KING'.toLowerCase());
        console.log('king'.toUpperCase());

     十一、Function对象

    JS中所有函数都是以对象形式存在的

    属性:

      1、construtor返回创建该对象的构造函数

      2、length 返回调用当前函数的参数个数

      3、caller  返回调用当前函数的函数

    function A() {
            return A.caller;
        }
        function B() {
            return A()
    
        }
        console.log(B());
        console.log(A());

      4、arugments返回该函数执行时内置的arguments对象

    function Test() {
            return arguments
        }
        console.log(Test(1,2,3,4,'a'))

      arguments.callee是调用函数本身,可以通过这种方式实现递归,举例说明,匿名函数的递归:

        function (count) {
            if(count<=3){
                console.log(count);
                arguments.callee(++count);
            }
        }
    )(0);

    方法:

      1、call()调用当前Function对象,可同时改变函数内的this指针引用,函数参数一个个分别传入

    var obj={
            name:'gavin',
            say:function (somebody) {
                return 'hello '+somebody+' this is '+ this.name;
    
            }
        }
    
        var obj1={
            name:'kkblue'
        }
    
    //    如果obj1想引用obj中的say方法,可以使用call()
        console.log(obj.say.call(obj1,'tom'));

    十二、Function对象

      3、apply()调用当前Function对象,可同时改变函数内this指针引用,函数参数以数组或者arguments方式传入

      3、toString()返回定义该Function对象的字符串

      4、valueOf()返回Function对象本身

     

     工具类对象:

         1、Math对象

      2、Date对象

      

    十三、Math对象

    console.log(Math.E);
        console.log(Math.PI);
        console.log(Math.abs(-12));
        console.log(Math.ceil(12.3323));
        console.log(Math.floor(14.8));
        console.log(Math.round(12345.52387,2));
        console.log(Math.pow(2,3));
        console.log(Math.sqrt(4));
        console.log(Math.random());
        console.log(Math.max(12,3,23,2323,5234,234232,3223432,));
        console.log(Math.min(123,3234,2324,123,3,32));

    十四、对象的属性

      对象自身的属性优先于对象的原型属性,举例说明:

    function Product(name) {
          this.name=name;  
    
        }
        Product.prototype.name='gaivn';
        var p1=new Product('kkblue')
        console.log(p1.name);//自身属性高于原型属性
        delete p1.name;//删除自身属性,会去查找原型属性
        console.log(p1.name);

      如果只显示自身属性,可以使用hasOwnProperty()来进行判断:

        function pro(name,color){
            this.name = name;
            this.color = color;
            this.someMethod = function () {
                return 'this is a test!!!'
    
            }
    
        }
        pro.prototype.price = 123454;
        pro.prototype.memory = 32;
        var p1 = new pro('苹果手机','白色');
        for(var i in p1){
            console.log(i);
        }
    //    如果只想显示自身的属性而不是原型属性使用hasOwnProperty
        for(var j in p1){
            if(p1.hasOwnProperty(j)){
                console.log(j)
            }
        }

      十五、prototype属性

      prototype可以给原型添加属性,这样做的好处在于,即使实例已经引用了对象,但是仍然可以通过对象原型添加属性,这是实例仍然可以继承这些原型属性,可以任意调用并修改

      只有函数才有prototype属性,而且prototype对应的是一个对象,这个对象里的construtor指回的是这个函数本身

      注意:

      在通过prototype进行原型添加的时候,即可以一个一个添加也可以通过对象的方式一起添加,例如:

    function Product(name,color){
            this.name = name;
            this.color = color;
            this.WhatAreYou = function () {
                return 'this is a '+this.color + ' '+ this.name;
                
            }
        }
        Product.prototype={
            price:6888,
            memory: 64,
            getInfo:function () {
                return "内存: "+ this.memory +"--价格: "+ Product.prototype.price;//在进行属性调用的时候,即可以使用this方式也可以使用prototype方式调用
            }
        };
        var p1 = new Product('iphone6','玫瑰金');
        console.log(p1.name);
        console.log(p1.color);
        console.log(p1.WhatAreYou());
        console.log(p1.price);
        console.log(p1.memory);//这些都是在原型上得到的,
        console.log(p1.getInfo());
    function Product(name,color){
            this.name = name;
            this.color = color;
            this.WhatAreYou = function () {
                return 'this is a '+this.color + ' '+ this.name;
                
            }
        }
        Product.prototype={
            price:6888,
            memory: 64,
            getInfo:function () {
                return "内存: "+ this.memory +"--价格: "+ Product.prototype.price;//在进行属性调用的时候,即可以使用this方式也可以使用prototype方式调用
            }
        };
        var p1 = new Product('iphone6','玫瑰金');
        console.log(p1.name);
        console.log(p1.color);
        console.log(p1.WhatAreYou());
        console.log(p1.price);
        console.log(p1.memory);
        console.log(p1.getInfo());
        在实例化以后,又通过prototype添加了新的属性或者方法,但是实例仍然可以引用
        Product.prototype.get=function (what) {
            return this[what];
        }
        console.log(p1.get('name'));
        console.log(p1.get('price'))

      __proto__属性:对象专有,函数是没有的

      每个函数在实例化后,产生的新的对象都会有一个__proto__隐含的属性指向源函数的prototype属性产生的原型对象,这个__proto__也叫做伪类属性,它是新产生的对象跟函数的原型对象之间的直接纽带关系,可以不通过函数就直接访问

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        function Person() {
            var age=30;
            this.age=22;
            this.name='gavin';
    
        }
        Person.prototype.headcount=3;
        var p1=new Person();
        var p2=new Person();
        Person.prototype.headcount=4;
    
        p1.constructor={name:33};//修改了p1的constructor后,p1的原型就不是Person了,但是仍然可以通过p1.headcout访问到
        //说明p1得到原型对象不是通过p1.constructor.prototype.headcount来得到的,而是通过__proto__直接从原型对象中得到的
        console.log(p1.headcount);
        console.log(p1.__proto__.headcount);
        Person.prototype.xx='aaaa';
        console.log(p1.xx);
        Person.prototype={yy:44};
        console.log(p1.yy);//访问不到,但是如果new一个对象,可以访问到
        var p3=new Person();
        console.log(p3.yy);
    </script>
    </body>
    </html>

    十六、JS解析与执行过程

    全局:

      预处理阶段:

        在全局层面,JS解析器有一个Exectue Context(执行上下文),这里有两种类型:

        1、var定义的变量,会直接定义为   变量名: undefined

        2、函数:会直接将整个函数引用调用

        顺序为先扫描函数声明后扫描变量(var声明的变量)在这里有两个原则:

          1、处理函数声明有冲突,会覆盖原有的函数

          2、处理变量声明有冲突,会忽略新的变量声明

        

      执行阶段

    函数:

      预处理阶段

      执行阶段

    十七、this

    this表示运行时的调用,而不是定义时的调用,只有当运行时才能知道this代表的是谁

    继承与多态的例子:

    其中继承通过Object.create(父类的.prototype)来完成,但是记住需要将子类的constructor修改为自己的类名,同时实现多态,需要子类的super=父类的prototype,同时在子类定义时需要调用子类.super.和父类同名的函数名称

  • 相关阅读:
    实验十二:面向对象基础 5、构造方法、重载
    实验十一:面向对象基础 3、类、对象、方法实训
    实验十:程序结构与数组 8、数组实训
    实验九:程序结构与数组 6、方法实训
    课后作业:情境三:程序结构与数组 5、方法
    Java获取随机数
    实验八:程序结构与数组 4、循环实训
    情境三:程序结构与数组 4、循环实训
    ES查询优化
    ES配置搜索规则
  • 原文地址:https://www.cnblogs.com/xiaopi-python/p/8251656.html
Copyright © 2020-2023  润新知