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.检测属性:in\hasOwnProperty

//创建对象

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

}

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

})

8.序列化对象

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

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

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

    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:"liangxue"

                                   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',24,'唱歌');

var bb=new Aa('sushan',24,'跳舞');

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

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();

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,565评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,021评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,003评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,015评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,020评论 5赞 370
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,856评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,178评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,824评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,264评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,788评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,913评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,535评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,130评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,102评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,334评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,298评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,622评论 2赞 343

推荐阅读更多精彩内容

  • snapshot-1.0.0.js
    "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 2,027评论 0赞 2
  • js十大设计模式
    工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,718评论 2赞 17
  • js设计模式笔记
    单例模式 适用场景：可能会在场景中使用到对象，但只有一个实例，加载时并不主动创建，需要时才创建 最常见的单例模式，...
    Obeing阅读 2,054评论 1赞 10
  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,115评论 0赞 13
  • pySpark 中文API (2)
    pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类： pyspark.sql...
    mpro阅读 9,446评论 0赞 13