码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript

时间:2019-07-02 19:07:37      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:理解   job   bind   参数   特定   splice   实例   时间   独立   

一、什么是Javascript

二、数据类型

  1.简单数据类型:Number、String、Boolean、Undefined、Null

1 undefined表示一个声明了没有赋值的变量,变量只声明的时候值默认是undefined;
2 null表示一个空,变量的值如果想为null,必须手动设置;

  2.复杂数据类型:Object

三、流程控制

  1.if 语句

1 语法结构:
2 if (/* 条件表达式 */){
3   // 成立执行语句
4 } else {
5   // 否则执行语句
6 }
7 
8 三元运算:对if……else语句的一种简化写法
9   条件表达式 ? 成立执行表达式 : 不成立执行表达式

  2.switch 语句

  3.while 语句

1 语法结构:
2 while (循环条件) {
3   //循环体
4 }

  4.do...while 语句

  5.for 语句

语法结构:
// for循环的表达式之间用的是;号分隔的,千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
  // 循环体4
}

  6.continue 和 break

break:立即跳出整个循环,即循环结束,开始执行循环后面的内容(直接跳到大括号);
continue:立即跳出当前循环,继续下一次循环(跳到i++的地方)

四、函数

  1.什么是函数

1 把一段相对独立的具有特定功能的代码块封装起来,形成一个独立实体,就是函数,起个名字(函数名),在后续开发中可以反复调用;
2 函数的作用就是封装一段代码,将来可以重复使用;

  2.函数的定义

1.函数声明:
function 函数名(){
  // 函数体
}

2.函数表达式:
var fn = function() {
  // 函数体
}

  3.函数的调用

  4.函数的返回值

返回值详解:
    如果函数没有显示的使用 return 语句 ,那么函数有默认的返回值:undefined
    如果函数使用 return 语句,那么跟再 return 后面的值,就成了函数的返回值
    如果函数使用 return 语句,但是 return 后面没有任何值,那么函数的返回值也是:undefined
    函数使用 return 语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说 return 后面的所有其他代码都不会再执行。

  5.apply、call、bind方法

apply 和 call 是调用的时候改变 this 指向;
bind 方法,是赋值一份的时候,改变了 this 的指向;

  6.高阶函数

  7.闭包

   7.1 什么是闭包:

     闭包简单理解:定义在一个函数内部的函数;

   7.2 闭包的用途:

     作用一:可以在函数外部读取函数内部成员;

     作用二:让函数内成员始终存活在内存中;

  8.递归

    8.1 什么是递归

      在函数中直接或间接的调用自己;

 

五、预解析

  1.什么是预解析

JavaScript代码的执行是由浏览器中的JavaScript解析器来执行的。JavaScript解析器执行JavaScript代码的时候,分为两个过程:预解析过程和代码执行过程

预解析过程:
1. 把变量的声明提升到当前作用域的最前面,只会提升声明,不会提升赋值。
2. 把函数的声明提升到当前作用域的最前面,只会提升声明,不会提升调用。
3. 先提升var,在提升function

六、对象

  1.对象的创建方式

第一种:对象字面量

var o = {
  name: zs,
  age: 18,
  sex: true,
  sayHi: function () {
    console.log(this.name);
  }
}; 

第二种:new Object()创建对象

var person = new Object();
  person.name = lisi;
  person.age = 35;
  person.job = actor;
  person.sayHi = function(){
  console.log(Hello,everyBody);
}

第三种:工厂函数创建对象
function createPerson(name, age, job) {
  var person = new Object();
  person.name = name;
  person.age = age;
  person.job = job;
  person.sayHi = function(){
    console.log(Hello,everyBody);
  }
  return person;
}
var p1 = createPerson(张三, 22, actor);

第四种:自定义构造函数
function Person(name,age,job){
  this.name = name;
  this.age = age;
  this.job = job;
  this.sayHi = function(){
      console.log(Hello,everyBody);
  }
}
var p1 = new Person(张三, 22, actor);

  2.内置对象

JavaScript中的对象分为3种:内置对象、浏览器对象、自定义对象;
JavaScript 提供多个内置对象:Math/Array/Number/String/Boolean...

    2.1 Math 对象   

Math对象不是构造函数,它具有数学常数和函数的属性和方法,都是以静态成员的方式提供;

Math.PI                        // 圆周率
Math.random()                // 生成随机数
Math.floor()/Math.ceil()     // 向下取整/向上取整
Math.round()                // 取整,四舍五入
Math.abs()                    // 绝对值
Math.max()/Math.min()         // 求最大和最小值

Math.sin()/Math.cos()         // 正弦/余弦
Math.power()/Math.sqrt()     // 求指数次幂/求平方根

    2.2 Data 对象

创建 Data 实例用来处理日期和时间。Date 对象基于1970年1月1日(世界标准时间)起的毫秒数。

    2.3 Array 对象

数组的常用方法:
// 1 栈操作(先进后出)
push()
pop()         //取出数组中的最后一项,修改length属性
// 2 队列操作(先进先出)
push()           
shift()        //取出数组中的第一个元素,修改length属性
unshift()     //在数组最前面插入项,返回数组的长度
// 3 排序方法
reverse()    //翻转数组
sort();     //即使是数组sort也是根据字符,从小到大排序
// 带参数的sort是如何实现的?
// 4 操作方法
concat()      //把参数拼接到当前数组
slice()     //从当前数组中截取一个新的数组,不影响原来的数组,参数start从0开始,end从1开始
splice()    //删除或替换当前数组的某些项目,参数start, deleteCount, options(要替换的项目)
// 5 位置方法
indexOf()、lastIndexOf()   //如果没找到返回-1
// 6 迭代方法 不会修改原数组(可选)
every()、filter()、forEach()、map()、some()
// 7 方法将数组的所有元素连接到一个字符串中。
join()                                                                        

    2.4 String 对象

字符串的常用方法:
// 1 字符方法
charAt()        //获取指定位置处字符
charCodeAt()      //获取指定位置处字符的ASCII码
str[0]           //HTML5,IE8+支持 和charAt()等效
// 2 字符串操作方法
concat()           //拼接字符串,等效于+,+更常用
slice()            //从start位置开始,截取到end位置,end取不到
substring()     //从start位置开始,截取到end位置,end取不到
substr()           //从start位置开始,截取length个字符
// 3 位置方法
indexOf()       //返回指定内容在元字符串中的位置
lastIndexOf()     //从后往前找,只找第一个匹配的
// 4 去除空白   
trim()          //只能去除字符串前后的空白
// 5 大小写转换方法
to(Locale)UpperCase()     //转换大写
to(Locale)LowerCase()     //转换小写
// 6 其它
search()
replace()
split()
fromCharCode()
// String.fromCharCode(101, 102, 103);     //把ASCII码转换成字符串

  3.构造函数

* 构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的          

  4.原型和原型链

    4.1 什么是原型和原型链

      原型:__proto__和 prototype,都是原型对象;

      原型链:是一种关系,实例对象和原型对象之间的关系,关系是通过原型( __proto__ )来联系的;

原型链:
如果一个对象的原型对象(__proto__),是另一个构造函数的实例,这个对象的原型对象就会指向另一个对象的原型对象,如此循环,就行成了原型链。

    4.2 原型的作用

      作用一:共享数据,节省内存空间;

      作用二:为了实现继承

实例对象中有个属性,__proto__,也是对象,叫原型,不是标准的属性,浏览器使用的;
构造函数中有一个属性,prototype,也是对象,叫原型,是标准属性,程序员使用;

总结:

* 构造函数可以实例化对象
* 构造函数中有一个属性叫prototype,是构造函数的原型对象
* 构造函数的原型对象(prototype)中有一个constructor构造器,这个构造器指向的就是自己所在的原型对象所在的构造函数
* 实例对象的原型对象(__proto__)指向的是该构造函数的原型对象
* 构造函数的原型对象(prototype)中的方法是可以被实例对象直接访问的

  5.继承

    5.1 什么是继承

    继承:继承是一种关系,类(class)与类之间的关系;JS中没有类,但是可以通过构造函数模拟类,然后通过原型实现继承;继承也是为了数据共享;

    5.2 原型链继承

       核心:改变儿子的 prototype 属性为父亲的实例;   

 1     // 父亲类
 2     function Parent() {
 3         this.value = value;
 4     }
 5     Parent.prototype.sayHi = function() {
 6             console.log(Hi);
 7         }
 8         // 儿子类
 9     function Child() {
10 
11     }
12     // 改变儿子的prototype属性为父亲的实例
13     Child.prototype = new Parent();
14 
15     var child = new Child();
16     // 首先现在child实例上进行查找,未找到,
17     // 然后找到原型对象(Parent类的一个实例),在进行查找,未找到,
18     // 在根据__proto__进行找到原型,发现sayHi方法。
19 
20     // 实现了Child继承
21     child.sayHi();

      缺点一:这种继承存在问题,就是引用类型属性共享;

 1 // 父亲类
 2     function Parent() {
 3         this.color = [pink, red];
 4     }
 5 
 6     // 儿子类
 7     function Child() {
 8 
 9     }
10     Child.prototype = new Parent();
11 
12     var child1 = new Child();
13     var child2 = new Child();
14     // 先输出child1和child2种color的值
15     console.log(child1.color); // ["pink", "red"]
16     console.log(child2.color); // ["pink", "red"]
17 
18     // 在child1的color数组添加white
19     child1.color.push(white);
20     console.log(child1.color); // ["pink", "red", "white"]
21     // child1上的改动,child2也会受到影响
22     console.log(child2.color); // ["pink", "red", "white"]

        缺点二:无法向父类传参  

    5.3 借助构造函数

     在这里,我们借用call函数可以改变函数作用域的特性,在子类中用 call 方法调用父类构造函数,复制父类的属性。此时没调用一次子类,复制一次。此时,每个实例都有自己的属性,不共享。同时我们可以通过call函数给父类传递参数。

     好处一:解决应用类型共享问题

 1     // 父亲类
 2     function Parent(name) {
 3         this.name = name;
 4         this.color = [pink, red];
 5     }
 6 
 7     // 儿子类
 8     function Child() {
 9         Parent.call(this);
10 
11         // 定义自己的属性
12         this.value = test;
13     }
14 
15 
16     var child1 = new Child();
17     var child2 = new Child();
18 
19     // 先输出child1和child2种color的值
20     console.log(child1.color); // ["pink", "red"]
21     console.log(child2.color); // ["pink", "red"]
22 
23     // 在child1的color数组添加white
24     child1.color.push(white);
25     console.log(child1.color); // ["pink", "red", "white"]
26     // child1上的改动,child2并没有受到影响
27     console.log(child2.color); // ["pink", "red"]

     好处二:解决传参数问题

 1     // 父亲类
 2     function Parent(name) {
 3         this.name = name;
 4         this.color = [pink, red];
 5     }
 6 
 7     // 儿子类
 8     function Child(name) {
 9         Parent.call(this, name);
10 
11         // 定义自己的属性
12         this.value = test;
13     }
14 
15     var child = new Child(qq);
16     // 将qq传递给Parent
17     console.log(child.name); // qq

    缺点:上述方法也存在一个问题,共享的方法都在构造函数中定义,无法达到函数复用的效果。

    5.4 组合继承

    根据上述两种方式,我们可以扬长避短,将需要共享的属性使用原型链继承的方法继承,将实例特有的属性,用借用构造函数的方式继承。

    5.5 拷贝继承

 

  6.函数中 this 的指向

* 普通函数中的this是谁?-----window
* 对象.方法中的this是谁?----当前的实例对象
* 定时器方法中的this是谁?----window
* 构造函数中的this是谁?-----实例对象
* 原型对象方法中的this是谁?---实例对象

七、正则表达式

  1.JavaScript中创建正则表达式的方式

1.通过构造函数创建对象
    //对象创建完毕---
    var reg=new RegExp(/\d{5}/);
    //调用方法验证字符串是否匹配
    var flag=reg.test("我的电话是10086");
    console.log(flag);

2.字面量的方式创建对象
    var reg=/\d{1,5}/;
    var flag=reg.test("小苏的幸运数字:888");
    console.log(flag);

  2.重要的正则表达式

重要的正则表达式:
邮箱:
[0-9a-zA-Z_.-]+[@][0-9a-zA-Z_.-]+([.][a-zA-Z]+){1,2}
中文:
\u4e00-\u9fa5
/^[\u4e00-\u9fa5]{2,6}$/  表示2到6个中文

八、JavaScript的垃圾回收机制

九、JavaScript的运行机制

 

JavaScript

标签:理解   job   bind   参数   特定   splice   实例   时间   独立   

原文地址:https://www.cnblogs.com/lize520/p/10951371.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!