js学习笔记（一）

 （一）函数

1.函数基本声明

function fun([参数1],[参数2],...){
    函数体；
};

 

2.函数表达式，又叫函数字面量

var 变量=function([参数1],[参数2],...){
    函数体；
};

3.函数构造法，需要new关键字词

var 变量=new function("参数1","参数2",...,函数体);

---

（二）对象、属性、数组等

1.

var o={
    init:function(){
        this.bind();
        this.popup();
    },
    bind:function(){
        return "你好";
    },
    popup:function(){

    }
};

//调用
o.init();

2.

var obj={};
obj.name="yaoyao";
obj['age']=23;
console.log(obj['name']);
console.log(obj['age']);

运行结果：yaoyao
             23

ps:   obj['name']等同于obj.name;两者区别：其中.是取自身属性，[]的里面可以是变量

3.

var obj={};
obj.name="yaoyao";
var nameN='name';

console.log(obj.nameN);
console.log(obj.['nameN']);
console.log(obj.[nameN]);//obj.[nameN]==obj.'name'

运行结果： undefined
                  undefined
                  yaoyao



4.删除属性；delete

//创建对象
var obj={};
obj.name="yaoyao";
//删除属性
delete obj.name;

console.log(obj['name']);

运行结果：undefined


5.检测属性:inhasOwnProperty

//创建对象
var obj={};
obj.name="yaoyao";
obj.age="undefined";

console.log(name in o);//检测属性是否属于当前对象，运算符in
console.log(obj.hasOwnProperty('name'));//检测属性,运算符hasOwnProperty
console.log(obj.name!=undefined);//检测属性
console.log(obj.age!=undefined);

运行结果： true
                  true
                  true
                  false



6.对象遍历、枚举属性

var o={//对象
    x:1,
    y:2,
    z:3
};

//数组对象
var arr=[{x:1},{y:2},{z:3}];


for(a in o){  //a是变量，for in遍历出key
console.log(a);
}

for(a in o){  //a是变量，for in遍历出value
console.log(o[a]);
}

for(a in arr){  //a是变量，for in遍历出数组的索引
console.log(a);
}

运行结果： x
           y
           z
           1
           2
           3
           0
           1
           2


7.数组循环

var arr=new Array();
arr=[1.6,5,3,5,33];

for(var i=0;i<arr.length;i++){//方法一,同步

}
$.each(arr,function(index,item){//方法二,异步

})

8.序列化对象

ps:  深拷贝和浅拷贝的区别：深拷贝--类似双胞胎是两个独立的个体；浅拷贝--也就是引用，类似人和自己的影子对象数组都是浅拷贝。

ps:  数据交互的数据类型是jsonxml字符串等，不能是对象，所以要想传送对象给服务器，需要序列化对象

var o={//对象
    x:1,
    y:2,
    z:3
};

console.log(JSON.stringify(o));//对象转换成字符串--stringify
console.log(typeof(JSON.stringify(o));//检测数据类型
var str=JSON.stringify(o);//把字符串转换成对象--parse
console.log(typeof(JSON.parse(str));//JSON.parse(str)是深拷贝，类似双胞胎是两个独立的个体  （浅拷贝，也就是引用，类似人和自己的影子）

var 02={
    x:1,
    y:2,
    z:3
}
var p=02;
o2.x='111';//浅拷贝--引用，随之改变
console.log(p);

运行结果：

        {"x":1,"y":2,"z":3}
        string
        object
        {x:"111",y:2,z:3}


9.jq的ajax实例

 $().ready(function () {
        $('#Login').click(function () {
            if ($('#username').val() == "" || $('#password').val() == "") {
                alert("用户名或密码不能为空！");
            }
            else {
                $.ajax({
                    type: "POST",
                    url: "Ajax/LoginHandler.ashx",
                    data: "username=" + escape($('#username').val()) + "&password=" + escape($('#password').val()),
                    beforeSend: function () {
                        $("#loading").css("display", "block"); //点击登录后显示loading，隐藏输入框
                        $("#login").css("display", "none");
                    },
                    success: function (msg) {
                        $("#loading").hide(); //隐藏loading
                        if (msg == "success") {
                            //parent.tb_remove();
                            parent.document.location.href = "admin.htm"; //如果登录成功则跳到管理界面
                            parent.tb_remove();
                        }
                        if (msg == "fail") {
                            alert("登录失败！");
                        }
                    },
                    complete: function (data) {
                        $("#loading").css("display", "none"); //点击登录后显示loading，隐藏输入框
                        $("#login").css("display", "block");
                    },
                    error: function (XMLHttpRequest, textStatus, thrownError) {
                    }
                });
            }
        });
    });

10.判断arr数组对象里面是否有a---hasOwnProperty()

var arr=[{a:1,q:2,w:3},{d:1,r:2,c:3},{t:1,v:2,z:3}];
for(var i=0;i<arr.length;i++){
    if(arr[i].hasOwnProperty('a')){//hasOwnProperty检测arr里main是否存在a
       console.log('yes');
       break;//跳出当前循环
     }else{
       console.log('no');
     }
}


$.each(arr.function(index,item){//此时的item是对象
    if(item.hasOwnProperty('a')){
       console.log('yes');      
     }else{
       console.log('no');
     }
})


$.each(arr.function(index,item){//index是索引，此时的item是对象
    if(item.a!=undefined){
       console.log('yes');      
     }else{
       console.log('no');
     }
})

运行结果： yes
                  yes
                  yes

---

_(三)

1.原型--prototype（原型属性）

ps: 每个函数都有一个原型属性，在此原型属性中都有一个构造（constructor）函数，原型里面所共有的属性对象实例化也有。

function Person(){

};
Person.prototype.name='yaoyao';
Person.prototype.age=22;
Person.prototype.action=function(){
    console.log(this.name);//该this指当前实例化的对象，并不是原型
};

var person1=new Person();
person1.name='ben';//局部改变
var person2=new Person();
console.log(person2.age);//输出22

person1.__proto__.age=30;//通过__proto__改变age属性值，全局发生了变化，全局age就等于30

console.log(person1.name);//输出ben
console.log(person2.name);//输出yaoyao
console.log(person2.age);//输出30
console.log(person2);//输出：Person {}
                       //__proto__:
                       //action:?()
                       //age:30
                        //name:"yaoyao"
                        //constructor:? Person()
                        //__proto__:Object

console.log(Person.prototype.isPrototypeOf(person2));//输出true--检测当前实例person2是否属于该原型

2.构造函数和原型混合使用

（1）单纯使用构造函数时（当需要多个实例时就得new多个，会导致性能变差，内存溢出，所以需要使用原型）

//构造函数
function Aa(name,age){
    this.name=name;
    this.age=age;
    this.action=function(){
        return this.name;
    }
};


var aa=new Aa('yaoyao',24);
var bb=new Aa('sushan',24);

console.log(aa.name);//输出yaoyao

（2）结合原型使用

//构造函数
function Aa(name,age,hobby){
    this.name=name;
    this.age=age;
    this.hobby=hobby;  
};

//原型--不会因为实例化多个而变化
Aa.prototype.action=function(){
    return '名字：'+this.name+',年龄：'+this.age+',爱好：'+this.hobby;
};
var aa=new Aa('yaoyao',22,'唱歌');
var bb=new Aa('sushan',22,'跳舞');

console.log(bb.action());//输出--名字：sushan,年龄：22,爱好：跳舞

3.继承（先继承代沟最小的，依次往后）

（1）

function Anima(){}
Anima.prototype.canDo=function(){
    console.log("吃饭睡觉");
}


function Cat(){}
Cat.prototype=new Anima();//Cat继承Anima
var cat=new Cat();//cat不仅拥有Anima里面的也拥有Cat里面的。
cat.canDo();//输出：吃饭睡觉


function Dog(){
    this.canDo=function(){
        console.log("吃狗粮");
    }
}
Dog.prototype=new Anima();//Dog继承Anima
var dog=new Dog();
dog.canDo();//输出：吃狗粮


cat1.canDo=function(){
console.log("猫吃鱼");
};
cat1.canDo();//输出：猫吃鱼

（2）

function Fa(){}
Fa.prototype.name="fa";
Fa.prototype.age=23;

function Fb(){};
Fb.prototype=new Fa();
Fb.prototype.name="fb";
Fb.prototype.age=24;

function Fc(){};
Fc.prototype=new Fb();
Fc.prototype.name="fc";

var fc=new Fc();
console.log(fc.name);//输出fc

fc.__proto__.name="fcc";//当前有name，改变当前
console.log(fc.name);//输出fcc

console.log(fc.age);//输出24，改变前
fc.__proto__.age=25;//当前没有age，改变有age且代沟最小的父类Fb
console.log(fc.age);//输出25

var fa=new Fa();
console.log(fa.age);//输出23，未被改变

4.有参数时的构造函数、原型、继承

function ParentType(name,age){
    this.name=name;
    this.age=age;
};

ParentType.prototype.getParentName=function(){
    return this.name;
}

function SonType(){
    ParentType.call(this,"yaoyao",23);//子类调用父类并传参，也可以使用apply(),作用都是在一个对象中调用另一个对象，区别在于所传参数call(this,name,age)    apply(this,数组)。
    this.name='yy';
};

SonType.prototype=new ParentType();
SonType.prototype.getSonName=function(){
    return this.name;
};

var aa=new SonType();
console.log(aa.name);//输出yy，如果实例化里有name先取实例化的
console.log(aa.age);//输出23

 

---

（四）作用域、闭包、递归、this关键字

1.作用域---当前所在区域，大可分为全局作用域、局部作用域

var x="123";
function aa(){
    var a='1';
}

function bb(){
    var b='2';
    console.log(b);//局部
    console.log(x); //全局  
}

bb();//输出2
           //123

2.闭包--内部和外部的函数联系桥梁

（1）

 var x="s1";
 function aa(){
     var x="s2";
     function son(){
         var x="s3";
         return x;
     };
     return son();
 };

 console.log(aa());//输出：s3

（2）

 var x="s1";
 function aa(){
     var x="s2";
     return function son(){
         var x="s3";
         return x;
     };   
 };


 console.log(aa());//输出：  ? son(){

                            //        var x="s3";

                             //      return x;

                                  }
 console.log(aa()());//输出：s3

（3）
 

var fun=(function aa(){
     var x="s2";
     return function son(){
         var x="s3";
         return x;
     };   
 }());

 console.log(fun());//输出s3

3.递归

（1）

function setup(x){
     var i=0;
     return function(){
         return x[i++];
     }
 }

 var next=setup(['a','b','c']);

 console.log(next());//输出a
 console.log(next());//输出b
 console.log(next());//输出c

（2）

var fun= (function setup(x){
    var i=0;
    return function(){
        return x[i++];
    }
}(['a','b','c']));


console.log(fun());//输出a
console.log(fun());//输出b
console.log(fun());//输出c

4.this关键字---指当前调用函数的对象（函数的拥有者）

（1）函数中引用

var x=1;
function test(){
    this.x;//指向window.x
};
test();
console.log(x);//输出1

-----------------
var x=1;
function test(){
    this.x=0;//指向window.x
};
test();
console.log(x);//输出0

-----------------
var x=1;
function test(){
    this.x=0;//指向window.x
};
function test1(){
    this.x=1;//指向window.x
};
test();
test1();
console.log(x);//输出1,根据执行顺序

（2）对象中调用

var o={};//创建对象
o.a=1;
o.action=function(){
    return this.a;//this指向o对象
}
console.log(o.action());//输出1

对象中调用外部函数

function test(){
    return this.a;//this指向o对象
}
var o={};//创建对象
o.a=1;
o.action=test;
console.log(o.action());//输出1

--------------------
ps: 改变this指向，可以用call(),appy()，用于在当前对象中调用其他对象，两者区别在于传参不同，appy(this,[])传的是数组；call(this,age,name);

var a="111";
function test(){
    return this.a;//this指向o对象
}
var o={};//创建对象
o.a=1;
o.b=test;
console.log(o.b.call());//输出111，call()未传参，此时this指向window中的a
console.log(o.b.call(o));//输出1，call()传o对象，此时this指向o中的a

（3）构造函数调用

function Fun(name,age){
    this.name=name;
    this.age=age;
}
var fun=new Fun("yaoyao",24);
console.log(fun.name);//输出yaoyao

（4）this指向----面试题

ps:  函数自执行  this指向window

var a=1;
var o={
    a:2,
    showA:function(){
        this.a=3;
        (function(){//闭包，自调
            console.log(this.a);//指向window中的a,输出1
        })();
        console.log(this.a);//指向当前对象的a,输出3
    }
}
o.showA();

---

未完待续~~