allenchinese / javascript Goto Github PK

1.定义构造函数(constructor)
构造函数:专门定义一类对象统一结构的特殊函数
作用:代码重用
合适使用:只要反复创建多个相同结构的对象前，都要用构造函数先定义统一的结构。
缺点:无法节约内存
如何定义:

function 类型名/构造函数名(属性参数，...){  
this.属性名=属性值；
this.方法名=function() {
this.属性名=属性值}   
 }

2.用new调用构造函数，传入属性值:
var obj=new 构造函数名(属性值)；

ex:

//step1:定义构造函数
function Student(name,age){this.name=name;this.age=age;this.intr=function(){}}
//step2:用new调用构造函数
var lilei=new Student("Li Lei",11);
var hmm=new Student("Han Meimei",12);

sort()用于对数组中元素从小到大进行排序

概念：在程序中一旦声明，就不能被修改的数据叫做 常量。

声明语法：

定时器：程序指定的时间间隔自动反复执行一项任务。
何时使用：只要希望不需要用户干预，也可以自动执行任务时。
如何使用：
1、定义任务函数：定时器每次执行的一项任务。
2、启动定时器：将任务函数放入定时器中，按时间间隔反复执行。
3、停止计时器
分类：
1、周期性定时器：让程序按照指定的时间间隔反复执行同一个任务
何时使用：一项任务需要反复定时执行
如何使用：
1、function task（）{...}
2、timer=setInterval（task，interval）；
强调：任务函数以回调函数方式传入定时器，不加（）
interval指么每次执行之间的时间间隔
3、启动定时器会返回一个定时器序号
定时器序号：内存中唯一标示一项定时任务，默认从1开始，连续不重复
定时器变量一般都在全局，需要跨函数使用
4、停止定时器：
1、用户手动停止：clearInterval(timer)
停止定时器后，伴随的都是清空timer，timer=null；
2、自动停止：在任务函数的结尾，都要判断是否达到临界值。如果达到临界值，就停止定时器

2、一次性定时器：让程序先等待一段时间，然后自动执行一次，在自动结束。
何时使用：一项任务，先等待一段时间，在执行一次就退出
如何使用：
1、function task（）{...}
2、启动定时器：timer=setTimeout(task,wait)
3、停止定时器：停止等待 clearIInterval(timer)
原理：浏览器是多线程程序，可同时执行多个任务
js引擎是单线程程序：一个时刻，只能执行一项任务

笔试题：
for（var i=0;i<3;i++）{
  setTimeout("console.log(i)",0);
}
//3,3,3

concat()拼接两个或者更多的数组，并且返回结果

![image 3](https://cloud.githubusercontent.com/assets/17878239/18031367/f952b86e-6d0f-11e6-9d29-21da7ae6d79c.jpg)

扩展内置对象的API——解决浏览器的兼容性问题：
1、对象的方法保存在对象构造函数的prototype中。
比如：Array.prototype:保存了所有数组类型可用的API。
2、如果需要的API在指定的类型的原型对象中不存在，说明不支持，就要在该类型的原型对象中添加所需的共有成员。
3、这边就是重写API，在API内部，用this获得当前正在调用API的点前的对象。
笔试题：如果浏览器不支持indexOf，要求重写indexOf方法

js底层中一切对象都是hash数组。
相同点：
1、每个属性都相当于hash数组中的每个元素。
属性名就是字符串类型的key。
属性值就是元素值。
2、如果访问不存在的属性时，不报错，返回undefined.
如果给不存在的属性添加值，会自动创建
3、可用for in遍历

不同点：
hash数组是一个数组，属于数组(Array)类型.
而对象则是Object类型

oop概述：
定义：面向对象的语言
三大特点：
1、

首先说一下typeof（变量）
特点：
1、null:typeof将null看做空地址，暂时不指向任何对象，所以解析为object
2、无法区分普通对象和数组
解决：
**1、根据原型对象判断：**Array.protype.isPrototypeOf(xxx); father——>son
**2、根据构造函数判断：**xxx instanceof Array month——>son实例化
3、根据对象的class属性
Object.prototype.toString.call（xxx）=="[object Object]"
class：每一个对象的内部属性，记录创建对象时使用的类型名
一旦创建，无法修改
只有一个方法获得对象的class
调用最原始的Object.prototype.toString方法
输出结果：[object Object][对象 class
问题：直接调用数组对象的方法，不再返回class属性值
解决：call(强行借用一个本来无法调用到的函数)
目标函数.call(xxx)
Object.prototype.toString.call(xxx)
4、ES5中的最新方法
Array.isArray(xxx)

语法：(？：)

表达式1？表达式2：表达式3
嵌套：表达式1？表达式2：(表达式a？表达式b：表达式c);

其中的：表达式1和表达式a的值为逻辑类型（boolean）

比如：

function fun() {
    console.log(a);    //不会出错，输出undefined  
    var a = 100;
    console.log(a);//100
}
    console.log(a);//报引用错误！

其等效于：

function fun() {
    var a;//仅声明提前
    console.log(a);//输出undefined
    a = 100;//赋值仍保留在原位置
    console.log(a);//100
}
    console.log(a);//报引用错误！

前言：JavaScript属于弱类型的程序语言
-变量在声明时不需要指定数据类型；
-变量由赋值操作确定数据类型
不同类型数据在计算过程中会自动进行转换

JavaScript不需要进行类型声明，因此他是一种弱类型（weakly typed）语言。这意味着程序员可以在任何阶段改变变量的数据类型。

以下语句在强类型（strongly typed）中是非法的，但在JavaScript中却完全没有问题：

slice()返回现有数组的一个子数

var arr = [10, 20, 30, 40, 50];
          var arr1 =arr.slice(2,5);//30,40
          var arr2 = arr.slice(2);//30,40,50
          var arr3= arr.slice(-5,-2);10,20,30 

检索4种：

1. 查找固定的关键词位置

   var i=str.indexOf("关键词"，fromi);
   var i=str.lastIndexOf("关键词"，fromi);
   

   问题：不支持正则。

2. 判断字符串中是否包含符合规则的关键词（敏感词） `var i=str.search(/正则表达式/);` 始终返回第一个关键词的位置。 如果没有找到则返回-1。 问题：1、只能找到第一个 2、只能获得位置，不能获得内容
   
3. 获得每个关键词的内容 `var kwords=str.match(/正则表达式/ig);` 1、获取字符串中所有匹配的关键词 2、返回的是一个数组 3、没有找到则返回的是null(空)
   
4. 能找到全部的关键词，还能显示位置？ **强调：** 只要一个方法可能返回null，都必须先验证不是null，再使用 kwords[0:"关键词"，index:位置]————用console.dir（）;

    function add(num1,num2) {
                return num1+num2;
      }

  var result = add(10 , 20);
   console.log(result);

//输出30

DOM定义：专门操作网页的API
何时使用：只要修改网页内容，都要用DOM查找、修改、添加、删除。
三种API：
1、核心DOM：
可操作一切结构文档，包括：HTML、XML。优点：万能。缺点：API繁琐
2、HTML DOM：对核心DOM中部分进行简化，专门操作HTML网页内容的API
实际开发中：优先使用简化版的HTML DOM，无法实现再去使用核心DOM
3、XML DOM：专门操作XML文档的API

1. 逻辑与操作符（&&）
   好比我们参加高考时，在进入考场前，必须同时出示准考证和身份证，两者缺一不可，表示如下：

if（有准考证&&有身份证）
{
   可进行考场考试
}

2.逻辑或操作符（||）
相当于生活中的或者，当条件中有任意一个满足，“逻辑或”的运算结果就是“真”。

var a=1;
var b=10;
var c;
c=b>a||b<a;//b>a是true,b<a是false,此时c是true。

3.逻辑非操作符（！）
逻辑非，也就是“不是”的意思

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

数据属性：实际存储属性值的属性
1、每个数据属性都有四大特性：
1、value：实际存储属性值
2、writable：true/false控制是否只读
3、enumerable：true/false控制是否能被遍历（for in）,但是用“.”依然可以访问
4、configurable：true/false控制以上特性是否可修改，以及是否可以删除其他属性

2、如何读取一个属性的特性：
Object.getOwnPropertyDescriptor(obj,"属性名")//返回一个对象，包含四大特性
3、如何修改一个属性的特性：
Object.defineProperty(obj，“属性”，{特性：值，特性：值})
4、一次性修改多个属性：
Object.defineProperties(obj，{
属性：{四大特性}，
属性：{四大特性}，
...：...
})

获取数组字符串两种方法：

1. toString()方法：可以把数组转换为字符串，并返回结果。

ex:  var arr1 = ["hello", "1234", new Date()]; 
      console.log(arr1);
      console.log(arr1.toString());

2. join([separator])返回一个字符串，由每个元素转换而成的字符串使用指定的separator拼接而成
`console.log(arr1.join("*"));`

1、手动排序——sort
使用：arr.sort();//直接修改原数组
特点：将arr中的元素以字符串的方式升序排列
以后只要是对非字符串类型进行排序，使用自定义排序
第一步：自定义比较器函数：
function cmp(a,b){return a-b;}
第二步：将比较器函数传入sort方法作为参数
arr.sort(cmp);
2、栈（stack）和队列（queue）
什么是栈：一端封闭，只能从另一端进出的数组
何时使用：如果希望总是使用最新进入数组的元素
如何使用：
1、结尾出入栈：
入栈：arr.push(值) 将值压入数组的结尾
出栈：var last=arr.pop(); 弹出数组最后一个元素
优点：每次出入栈不影响其余元素的位置
2、开头出入栈：
入栈：arr.unshift(值) 将数值插入数组前头
出栈：**var first=arr.shift(值)；**取出数组第一个元素
缺点：每次出入栈，其余元素的位置都要順移1

创建一个函数：
1、声明方式：可被声明提前
function 函数名（参数列表）{函数体；return 返回值}
2、以函数直接量方式创建：不会被提前
var 函数名=function（参数列表）{函数体；return 返回值}

说明：函数名其实就是一个变量
          函数其实就是一个对象
          函数名变量保存了函数对象的地址，是引用

作用域：js只有两级作用域：全局作用域和函数作用域

splice()从数组中删除一部分元素，并添加另一部分元素

         var arr= [10, 20, 30, 40, 50];
         var arr1 = arr.splice(1,2);//[10, 40, 50]
         var arr2 = arr.splice(2,0,"你好");//[10, 20, 30, 你好， 40， 50]
         var arr3 = arr.splice(2,1,[98, 99, 100]);//[10, 20, [98, 99, 100], 40, 50]

访问器属性：不直接存储属性值，而是为其他数据属性提供保护的特殊属性
四大特性：
1、get：function（）{return 受保护的属性的值}
2、set：function（val）{//经过验证 受保护的属性=val}
3、enumerable
4、configurable
使用场合：对一个属性自定义规则保护逻辑时，都要用访问器属性
get and set：不用手动调用
1、试图获取访问器属性保护的值，自动调用get()
2、试图为访问器属性保护的属性赋值时，自动调用set()
set中的参数val，会自动获得要赋的值

oop概述：面向对象的语言
面向对象三大特点：封装、继承、多态
1、封装：将一个事物的属性和功能集中定义在一个对象中。
作用：代码重用，节约内存
2、继承：父对象中的成员，子对象不用重新创建，就可直接使用。
作用：代码重用，节约内存
何时使用：只要多个子对象中含有相同的成员，就可将相同的成员保存到父对象中一次，所有子对象共同使用。
如何使用："js中的继承都是用原型对象实现的——原型对象/对象原型"
3、多态：同一个函数，在不同情况下，表现不同的状态。
在js中体现的是重写(override)：如果子对象，觉得父对象继承来的成员不好用，即可在子对象本地，重新定义同名成员，来覆盖父对象的成员。
重写体现了子对象和父对象之间的差异。

原型对象（prototype）：
1、定义：集中保存所有子对象共有的成员的父级对象。
原型对象不用创建，每个构造函数都自带一个原型对象。
2、何时使用：只要一类对象有共有的成员，都必须集中定义在原型对象中一次就行。
3、获得原型对象：
1、构造函数.prototype（m-->f）
2、子对象.proto(son-->father)
问题：proto是内部属性
解决：Object.getPrototypeOf(子对象)获得子对象的父级原型对象
4、如何向原型对象中添加共有属性：
构造函数名.prototype.成员名=值;
5、修改共有属性就必须使用原型对象
构造函数名.prototype.成员名=值，和添加一样
如果在子对象本地修改，导致子对象本地添加了自有属性，从此子对象无法在使用共有属性。
6、删除属性
delete 对象.属性名
注意：只能删除当前对象自有的成员，如果想要删除共有成员，不报错也无法删除。

错误处理：在程序错误发生时,保证程序不强行退出机制。
处理方法：
try{
可能出现错误的逻辑正常的语句（可能会受到外界影响而产生错误，本身并无错误）
} catch（err）{
只有发生错误时才会执行的代码（err不能省略）
} finally {
无论是否出错都要执行的代码
}
注意：1、当一段代码放入到try中，它的执行效率必然会下降
2、try中只会放可能会出错的代码
3、如果可以提前预知的错误，都可以用if else来代替try catch。
4、 如果无法预知那么只能用try catch
添加一道笔试题：

var n=2;
function fun（）{
      try{
        n++；//3
        return n; 暂时挂起不跳出程序//3
}    catch(err){
        n++;
        return n;
}     finally{
        n++;//4
        return n;//4
}
}
console.log(fun());//4
console.log(n);//4
``
res:  4    4

什么是BOM：专门操作浏览器窗口的API
DHTML模型：
window:2个角色
1、全局作用域
2、封装操作浏览器窗口的API-BOM
history：封装当前窗口打开后，成功访问过的url历史记录的栈——前进、后退、刷新
navigator：封装浏览器软件的配置信息
location：封装当前窗口正在打开的URL对象
document：封装所有的网页内容——DOM
screen：封装了当前显示器的信息
event：在事件发生时，保存事件的相关信息

window对象：
1、打开和关闭窗口：
总结打开超链接的方式：
1.在当前窗口打开，可后退
html:
js:window.open("url","_self");
2、在当前窗口打开，不可后退
js:location.replace(url);
用新的URL替换history中当前的URL
3、在新窗口打开，可同时打开多个
html:
js:window.open("url","_blank");js默认为blank
4、在新窗口打开，只能打开一个
html:
js:window.open("url","name");

语法 ：^

作用：两个数的二进制中，该位数字只有一个1的时候，改位数字结果才为1，其他情况为0.

使用场合：互换两个数字时，不借助第三方变量。

num1 = num1 ^ num2;
num2 = num2 ^ num1;
num1 = num1 ^ num2;

1、定义：网页的所有内容，在内存中其实是以树形结构存储的。
2、何时创建：当浏览器读取到html内容时，自动创建DOM树。
3、如何创建：

1. 读到html文档时，先创建根节点对象：
   document查找元素，创建元素
   document对象：指代正在加载的网页，包含网页中的一切内容

2.开始顺序读取html文档中的内容，创建子节点
网页中的一切内容，都是DOM树上的节点对象。

数组(Array)是指一个变量表示一个值的集合，集合中每一个值都是这个数组的一个元素（element）.例如，我们可以用beatles的变量来保存Beatles乐队的4个成员的姓名。

1. 数组可以用关键字Array声明，声明数组的同时还可以指定数组初始元素的个数，也即是这个数组的长度（length）: var beatles = Array(4);。当然数组的元素个数可以不给出。

2.向数组添加元素的操作叫做填充（populating）,语法：array[index] = element;
下面是声明和填充beatles数组的全过程：

var beatles = Array(4);
beatles[0] = "john";
beatles[1] = "paul";
beatles[2] = "george";
beatles[3] = "ringo";

还有一个简单的方式：在声明的数组里同时对他进行填充：
var beatles = Array("john","paul","george","ringo");
我们甚至可以用不着明确的表明自己正在创建的是数组。事实上只需要一对方括号把各个元素的初始值括起来就可以：
var beatles = ["john","paul","george","ringo"];
还可以对数组包含其他的数组例如：

var lennon = ["john",1940,false];
var beatles = [];
beatles[0] = lennon;
这样就有：beatles[0][0]的值就是john;beatles[0][1]的值是1940;beatles[0][2]的值是false.

javascript中字符串内容都是不可变的，string对象的所有方法，返回的都是一个新的对象，而不是修改原始的字符串内容。

字符串常用的操作：

语法：&；

作用：将两边得到的操作数都转化成二进制，每一位的数字，只有都为1的时候，改位上的结果才是1，否则 改位按0处理。

使用场合：判断一个数字的奇偶性（任何数与1与。）

对象是什么：描述现实中一个具体的属性和功能的程序结构。事物的属性会成为对象的属性，事物的功能会成为对象的方法。
面向对象：在程序中，都是先用对象封装一个事物的属性和功能。然后，再按需要调用对象的功能来操作属性。
如何使用：
1、创建对象——封装
封装：将现实中一个事物的属性和功能集中定义在一个对象中。
创建的方法（两种）
1、对象直接量
何时使用：如果创建对象时，已经知道对象的所有属性和方法名。
2、用new关键词
何时使用：创建对象时不知道对象的属性和方法名时，需要后续动态添加。

2、调用对象的方法，操作对象的属性
访问属性——对象.属性（obj.name）or 对象["属性名"]

调用方法——对象.方法名（参数）
*如果没有访问到属性就会返回undefined

2、

定义：即重用变量，又保护变量不受污染的机制。
原因：

什么是引用类型？值不保存在变量本地的数据类型
例子：var myArr = ["tom","jerry"];
myArr在内存中对应一个地址：如0x9091,这个地址指向了数组，即对象。

定义：封装了一个时间，以及操作这个时间的API
原理：日期对象中保存一个巨大的毫秒数，是1970.1.1 0点至今的毫秒数
使用：只要保存时间或日期，以及对时间进行操作
创建方法：

var now=new Date();
now 封装的是本地客户端的时间

var date=new Date("yy/MM/dd hh: mm: ss");注意：时分秒可以省略 
var date=new Date(yyyy,MM-1,dd,hh,mm,ss);

复制时间的方法：希望保留开始时间和截止时间
var date1=new Date();
var date2=new Date(date1);

Date API:
FullYear Month Date Day(星期，没有set方法) Hours Minutes Seconds Milliseconds
每个API都已一对get和set的方法（day没有set的方法，因为星期是不可以随意改变的，固定的）

注意：Month 0~11 需要修正，计算机中的月份，比现实中的月份少1个月

1、对象直接量
var obj={
属性名：属性值，
。。。：。。。，
方法名：function(){
this.属性名
}
}
强调：1、js底层，一切对象都是hash数组。
2、每个属性和方法其实都是hash数组中的元素。
3、对象中的每个成员名都是字符串类型，但可省略“”。
4、对象中的方法访问对象自己的属性
this.属性名
其中this默认指当前所在对象
2、用new关键词
1、先创建一个空对象
var obj=new Object();
2、在向空对象中添加属性和方法
obj.属性名=值；
obj.方法名=function(){
...this.属性名...
}
强调：js底层对象随时可添加新属性和方法——底层就是一个hash数组

SyntaxError:语法错误
ReferenceError:引用错误，没有找到
TypeError:类型错误，错误的使用了对象方法
RangeError:范围错误，特指参数超范围
EvalError:错误的使用了eval
URIError:URI错误

定义：定义函数时，不使用任何变量引用的函数。
作用（好处）：1、节约内存 2、由于没有任何变量引用，所以使用完后立即释放。
何时使用：如果一个函数只是用一次，那么必须使用匿名函数。
如何使用：
1、自调：创建完函数，立即执行。
（function （参数列表）{代码块}）（...）;
（function （date）{}）（new Date()）;

2、回调：将函数定义后，传递给另一个函数去使用
比如：比较器函数
arr.sort(function(a,b){return a-b;});

1.&&中第一个表达式为假的话，那么第二个表达式就不在需要进行判断，并且将第一个表达式的值作为整个判断的值。
例子：

var i=j=10;
(i++ >= 50)&&(j++ >=5);
console.log(i);
console.log(j);
结果：i=11;j=10.

分析：后面的(j++ >= 5)没有被执行。

2.||（或）对于第一个表达式的值为真时，第二个表达式不在需要进行判断，第一个表达式的值作为整个判断的值；
当第一个表达式为假时，继续判断第二个表达式，那么第二个表达式的值作为整个判断的值。

reverse（）倒转数组中元素的顺序

var arr = [10, 20, 30, 40, 50];
arr.reverse(arr);
console.log(arr);//[50, 40, 30, 20, 10]

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-_的方式来自定义属性，所谓data-_实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

使用jQuery的.data()方法来访问这些"data-*" 属性。其中一个方法就是 .data(obj)，这个方法是在 jQuery1.4.3版本后出现的，它能返回相应的data属性。

<div id="awesome"
     data-myid="3e4ae6c4e">Some awesome data</div>

var myid= jQuery("#awesome").data('myid');
console.log(myid);

定义：封装一个函数定义的对象
创建：
1、声明
function 变量名（参数列表）{函数体；return 返回值}
强调：只有声明方式，函数才会声明提前，赋值保留在原地

2、函数直接量：
var 函数名=function（参数列表）{}

3、用new关键词：
var 函数名=new Function（“参数1”，“参数2”,..."参数n","函数体；return 返回值"）

重载（overload）
定义：相同的函数名，不同的参数列表的多个函数，在调用时，可自动根据传入的参数不同，执行不同的逻辑

注意：js默认是不支持重载的，因为js中不允许同时包含多个同名函数，最后定义的同名函数，回覆盖前面定义的

解决：使用arguments对象
arguments自动创建的，保存所有传入函数的参数值的类数组对象
类数组和数组的比较（笔试题）*

相同：类数组就会有数组的特点：
1、可用下标访问每个元素
2、都有length属性
3、使用for遍历
不同点：毕竟不是数组
1、无法使用数组类型的API
2、类型不同，数组是数组类型，为arguments则是对象

这边先讲一下其中的几个常用的输入信息的方法：
*1、console.log 用于输出普通信息
2、console.info 用于输出提示性信息
3、console.error用于输出错误信息
4、console.warn用于输出警示信息
5、console.debug用于输出调试信息

作用域（scope）：一个变量的可用范围，本质是存储变量的对象。
作用域链（scope chain）
全局作用域（window）
函数作用域（局部）（AO：Actived Object）
1、程序开始时：
创建一个ECS（执行环境栈）：专门按调用顺序保存每一个函数的执行环境的集合
开始执行时首先压入全局执行环境EC，全局EC中main()主程序引用window.
2、定义函数时
创建函数对象
用函数名创建全局变量（fun（）），引用函数对象
在函数对象中，设置scope属性，引用函数来自的作用域，通常scope都是window
3、调用函数时
创建一个活动对象（函数作用域）Actived Object:保存函数的局部变量 的函数作用域对象
向EC中压入本次函数调用的执行环境EC
EC中的scope chain （作用域链）属性引用AO
AO中添加parent成员，引用函数来自的父级作用域对象window
4、函数调用结束后
本次函数 调用 的EC执行环境出栈，导致AO无人使用，被释放
导致AO函数作用域中的唯一变量一同被释放

其实：
window对象就是全局作用域
AO对象就是函数作用域对象
AO对象引用了window对象

作用域链控制着变量的使用顺序：
优先使用AO中的局部变量
如果AO中没有，就沿着作用域链向下找
如果到window中也没有找到，就报错