JS高级(一)--基础、数据类型、对象的基本使用、构造函数

一、JS基本介绍

---

 

• JS的用途：Javascript可以实现浏览器端、服务器端(nodejs)。。。

• 浏览器端JS由以下三个部分组成：

1. ECMAScript：基础语法(数据类型、运算符、函数。。。)
2. BOM(浏览器对象模型)：window、location、history、navigator。。。
3. DOM(文档对象模型)：div、p、span。。。

• ECMAScript又名es ，有以下重大版本：

1. es1.0。。。es3.1
2. es5
3. es6(es2015)
4. es7(es2016)、es8(es2017)

二、数据类型

---

 

• 基本数据类型——值类型：

　　- 6中原始类型：

1. Boolean：布尔值是一种逻辑数据类型,只能有值true或者false
2. Null：null值表示不存在或者无效的对象或地址的引用
3. Undefined：一个原始值自动分配给刚刚声明的变量或者没有实际参数的形式参数
4. Number
5. String
6. Symbol(ES6新定义)：数据类型 “symbol” 是一种原始数据类型，该类型的性质在于这个类型的值可以用来创建匿名的对象属性。该数据类型通常被用作一个对象属性的键值，当这个属性是用于类或对象类型的内部使用的时候

　　- 和Object

// 如何理解undefined类型 ?　
//1、一个变量声明了，但是没有赋值，值默认为undefined
var b;
console.log(b);//b就是一个undefined类型的值
//2、一个变量声明了，并且赋值了一个undefined的值
var c=undefined;
console.log(c);//c也是一个undefined类型的值
//3、一个对象中，获取某个不存在的属性，值也是undefined
var d={};
console.log(d.age);//由于d对象没有age属性，值：undefined

//a变量没有声明过——>如果获取变量的值，是会产生语法错误的 
console.log(a); //不是undefined,而是错误

• 复杂数据类型——引用类型：(对象)

1. 数组
2. 函数
3. 正则表达式
4. Date

三、对象的基本使用

---

 (一)、创建一个对象

var student={
  name:"李白" , //student有一个name属性，值为"李白"
  grade:"初一" ,
  //a、student有一个say属性，值为一个函数
  //b、student有一个say方法
  say:function(){
    console.log("你好");
  },
  run:function(speed){
    console.log("正在以"+speed+"米/秒的速度奔跑");
  }
}

对象是键值对的集合：对象是由属性和方法构成的 (ps：也有说法为：对象里面皆属性，认为方法也是一个属性)

- name是属性 grade是属性

- say是方法 run是方法

(二)、对象属性操作

1、获取属性：

• 第一种方式：.语法

- student.name 获取到name属性的值，为："李白"

- student.say 获取到一个函数

• 第二种方式：[]语法

- student["name"] 等价于student.name

- student["say"] 等价于student.say

• 号外：2种方式的差异：

- .语法更方便，但是坑比较多(有局限性)，比如：

1.    .后面不能使用js中的关键字、保留字(class、this、function。。。)
2.    .后面不能使用数字

var obj={};
obj.this=5; //语法错误
obj.0=10; //语法错误

 

- []使用更广泛

1. o1[变量name]
2. ["class"]、["this"]都可以随意使用   `obj["this"]=10`
3. [0]、[1]、[2]也可以使用  `obj[3]=50 = obj["3"]=50`
4. 甚至还可以这样用：["[object Array]"]     jquery里面就有这样的实现
5. 也可以这样用：["{abc}"]   给对象添加了{abc}属性

2、设置属性

- `student["gender"]="男"` 等价于： `student.gender="男"`

含义：如果student对象中没有gender属性，就添加一个gender属性，值为"男"

如果student对象中有gender属性，就修改gender属性的值为"男"

- 案例1：`student.isFemale=true`

- 案例2：`student["children"]=[1,2,5]`

- 案例3：

student.toShanghai=function(){

console.log("正在去往上海的路上")

}

3、删除属性

- delete student["gender"]

- delete student.gender

//1、创建对象
var person={
  gender:"男",
  height:185,
  toShanghai:function(){
    console.log('做着高端大气上档次的和谐号动车组');
  }
};
//2、获取属性
console.log(person.gender);         //"男"
console.log(person["height"]);      //185
//3、设置属性
person.address="上海市闸北区";
person.height=190;
//4、删除属性
delete person.gender;
delete person.a;        //这段代码没有意义，也不会报错
//delete关键字只能删除对象中的属性，不能删除变量
// var a=100;
// delete a;//错误的理解
//清空对象
person={};      //person对象不再具有任何属性
person=null;    
//表示将person变量的值赋为null，从此以后person不再是一个对象了

四、通过构造函数创建对象

---

 

构造函数创建对象的例子：

• var xiaoming = new Object() --> var xiaoming = {};
• var now = new Date()
• var rooms = new Array(1,3,5) --> var rooms = [1,3,5]
• `var isMale=/123/;` ==> `var isMale=new RegExp("123")`

1. isMale是通过RegExp构造函数创建出来的对象
2. isMale是RegExp构造函数的实例

• 以上例子中，Object、Date、Array都是内置的构造函数

五、自定义一个构造函数来创建对象

---

 (一)、构造函数

  function Person(name,age){
      this.name=name;
      this.age=age;
  }
  var p1=new Person("赵云",18)

• • 说明：`p1就是根据【Person构造函数】创建出来的对象`

(二)、构造函数的概念

• 任何函数都可以当成构造函数   `function CreateFunc(){ }`
• 只要把一个函数通过new的方式来进行调用，我们就把这一次函数的调用方式称之为：构造函数的调用

1. new CreateFunc(); 此时CreateFunc就是一个构造函数
2. CreateFunc(); 此时的CreateFunc并不是构造函数

(三)、关于new Object()

new Object()等同于对象字面量{}

(四)、构造函数的执行过程

`var p1=new Person();`

1、创建一个对象 (我们把这个对象称之为Person构造函数的实例)- `_p1 `

2、创建一个内部对象，`this`，将this指向该实例(_p1)

3、执行函数内部的代码，其中，操作this的部分就是操作了该实例(_p1)

4、返回值：

- a、如果函数没有返回值(没有return语句)，那么就会返回构造函数的实例(p1)

- b、如果函数返回了一个基本数据类型的值，那么本次构造函数的返回值是该实例(_p1)

function fn(){
}
var f1=new fn(); //f1就是fn的实例
function fn2(){
return "abc";
}
var f2=new fn2(); //f2是fn2构造函数的实例

- c、如果函数返回了一个复杂数据类型的值，那么本次函数的返回值就是该值

 function fn3(){
     return [1,3,5];
     //数组是一个对象类型的值，
     //所以数组是一个复杂数据类型的值
     //-->本次构造函数的真正返回值就是该数组
     //-->不再是fn3构造函数的实例
 }
 var f3=new fn3(); //f3还是fn3的实例吗？错
 //f3值为[1,3,5]

 

//1、s是_fn构造函数的实例
    function _fn(){
        return 5;
    }
    var s=new _fn();
    //2、q1是_fn3构造函数的实例
    function _fn3(){}
    var q1=new _fn3();
    //3、qw不是fn3构造函数的实例
    function fn3(){
        return [1,3,5]; 
    }
    var qw=new fn3();//qw=[1,3,5]
    console.log(qw);

    //如何判断一个数据是否是复杂数据类型？
    //使用排除法：
    //a、看它的值是不是：数字、字符串、布尔值、null、undefined，
    //b、如果不是以上5种值，那就是复杂数据类型

    //  举例：
    // [1,3,5]
    //  /abc/
    //  function(){}
    //  new Object();

    //为什么要理解构造函数的返回值？
    //String是一个内置函数
    //a、String()
    //b、new String()
    
    //结论：一个函数通过new调用，或者不通过new调用，很多时候会有截然不同的返回值
    //我如何分辨出一个对象到底是不是某个构造函数的实例？
    //a、var isTrue=xxx instanceof Person

    function Person(){

    }
    var p1=new Person();
    console.log(p1 instanceof Person);//true，就是Person的实例

    function Student(){
        return 100;
    }
    var s1=new Student();
    console.log(s1 instanceof Student);//true，就是Student的实例

    function Programmer(){
        return [1,3,5]
    }
    var pro=new Programmer();//pro并不是Programmer的实例
    console.log(pro instanceof Programmer);//false
    
    console.log("是数组的实例吗？",pro instanceof Array);//true

    //小技巧：如何通过肉眼识别xxx对象时哪个构造函数的实例？
    //xxx.__proto__属性，也是对象，该对象中一般都会有一个constructor属性，这个指向PPP函数，那么就可以认为：xxx是PPP构造函数的实例

    //typeof运算符，只能判断：数字、字符串、布尔值、undefined、函数
    //切记：千万不能使用typeof运算符来判断对象的构造函数
    //typeof null === "object"
    //typeof {}  === "object"
    //typeof []  === "object"
    //typeof function(){} === "function"
    //typeof /abc/     === "object"