【前端攻城师之JS基础】03函数进阶

1.this关键字

解析器在调用函数时，每次都会偷偷的向函数传递一个隐含的参数，这个参数就是this, this指向一个对象
这个对象我们成为上下文对象
根据函数调用方式的不同，this指向的对象也不同
以函数形式调用fun( ),this指向window对象
以方法形式调用 obj.fun( ),this指向调用方法的那个对象

2.谷歌浏览器debug调试

1. 打开开发者工具
2. 找到source/来源
3. 打开源代码
4. 在想要程序停顿的地方打断电
5. 重新刷新一下网页
6. 光标选中想要添加监视的变量，右击，添加到监视区
7. f10/鼠标点击一步一步执行代码

3.使用工厂方法创建对象

1.介绍

如果我们想要创建多个对象，每次都使用字面量创建，就要重复写很多遍，不妨将相同的代码提取出来，封装成一个函数，封装成创建对象的函数叫做工厂方法（批量生产）

 function createPerson(name,age,sex){

​      var obj=new Object();

​      obj.name=name;

​      obj.age=age;

​      obj.sex=sex;

​      obj.sayName=function(){

​        return *this*.name;

​      }

​      //将新的对象返回

​      return obj;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.工厂方法的使用

​	var obj1=createPerson("孙悟空",18,"男");

​    var obj2=createPerson("猪八戒",20,"男");

​    var obj3=createPerson("沙和尚",38,"男");

​    console.log(obj1);

​    console.log(obj2);

​    console.log(obj3);

1
2
3
4
5
6
7
8
9
10
11
12

4.使用构造函数创建对象

1.介绍

构造函数的存在前提，使用new Object创建出来的对象，对象类型都是Object,如果我们想要区分两个对象的类型，工厂方法创建对象已经不合适了，所以为了区分对象的类型，提出了构造函数

类：构造函数就是一个类

实例：构造函数新建的对象，叫做这个类的实例
1
2
3

• 构造函数就是一个普通的函数，创建方式和普通方式没有区别，不同的是构造函数名习惯首字母大写
• 构造函数和普通函数的区别是调用上的区别，普通函数直接调用，构造函数需要使用new关键字调用

2.构造函数的执行流程

1. 使用new Object创建一个新的对象 //浏览器的工作

2. 将新建的对象设置为函数中的this,这样我们就能**在函数内部使用this来指向新建的对象 **//浏览器的工作

3. 逐行执行构造函数中的代码

4. 将新建的对象返回//浏览器的工作

   传什么参数就建什么对象

3.构造函数的具体实现

function  fun(   ) {

​        alert(this.name+this.age);

} 

​    function Person(name,age){

​      this.name=name;

​      this.age=age;

​	this.sayHello=fun;

​    }

​    function Dog(name,age){

​      this.name=name;

​      this.age=age;

​      this.sayHello=fun;

​   }

​    var per=new Person("白骨精",1000);

​    var dog=new Dog("旺财",3);

​    console.log(per);

​    console.log(dog);

​	per.sayHello(   );

​	dog.sayHello(  );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

4.instanceof某个类的实例

我们可以用instanceof 检查一个对象是否是某个类的实例

per instanceof Person;

dog instanceof Dog

Object是所有实例的超类

5.补充

使用同一个构造函数创建出来的对象，我们成为一类对象，也将构造函数称为一个类

使用构造函数新创建出的对象，我们称为该类的实例

5.this再总结

以函数形式调用fun( ),this指向window对象

以方法形式调用 obj.fun( ),this指向调用方法的那个对象

当以构造函数的形式调用，new Person(),this就是构造函数新创建的那个对象