JS - 爱python的小皮

公告

一、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('\n');
//    元字符. 匹配不换行

var res=/\w/.test('this is a blue')
\w 是0-9  a-z  A-Z   \W是除了前面的这些

//        \s表示空白字符  \S 非空白字符
      var res=/\s/.test('hello world!')

//    \b代表单词的边界
    var res=/\bgood\b/.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;width: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="width: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.和父类同名的函数名称

posted on 2018-01-09 15:27 爱python的小皮阅读(225) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部