update:构造函数相关
This commit is contained in:
qianguyihao
parent
765da5e00c
commit
fc653e5107
@ -132,7 +132,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
|
||||
|
||||
|
||||
另外：**如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的**。举例如下：(box3 描述得最近，所以采用 box3 的属性)
|
||||
|
||||
|
||||
|
||||
@ -89,8 +89,11 @@
|
||||
|
||||
ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定（无论this绑定到什么）。
|
||||
|
||||
|
||||
## arguments（待定）
|
||||
|
||||
> 这部分，小白可能看不懂。所以，这一段，可以忽略。
|
||||
|
||||
在调用函数时，浏览器每次都会传递进两个隐含的参数：
|
||||
|
||||
- 1.函数的上下文对象 this
|
||||
|
||||
@ -1,18 +1,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 面向对象的概念
|
||||
|
||||
**对象的作用是：封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。
|
||||
|
||||
那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要...
|
||||
|
||||
对象具有**特征**（属性）和**行为**（方法）。
|
||||
|
||||
面向对象：可以创建自定义的类型、很好的支持继承和多态。
|
||||
|
||||
面向对象的特征：封装、继承、多态。
|
||||
> 在看本文之前，可以先复习前面的一篇文章：《03-JavaScript基础/07-对象简介和对象的基本操作.md》
|
||||
|
||||
## 创建自定义对象的几种方法
|
||||
|
||||
@ -39,35 +27,7 @@ console.log(o);
|
||||
|
||||
|
||||
|
||||
### 方式二：利用构造函数
|
||||
|
||||
|
||||
```javascript
|
||||
//利用构造函数自定义对象
|
||||
var stu1 = new Student("smyh");
|
||||
console.log(stu1);
|
||||
stu1.sayHi();
|
||||
|
||||
var stu2 = new Student("vae");
|
||||
console.log(stu2);
|
||||
stu2.sayHi();
|
||||
|
||||
|
||||
// 创建一个构造函数
|
||||
function Student(name) {
|
||||
this.name = name; //this指的是构造函数中的对象实例
|
||||
this.sayHi = function () {
|
||||
console.log(this.name + "厉害了");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 方式三：工厂模式
|
||||
### 方式二：工厂模式
|
||||
|
||||
通过该方法可以大批量的创建对象。
|
||||
|
||||
@ -95,33 +55,87 @@ console.log(o);
|
||||
var obj4 = createPerson("蜘蛛精", 18, "女");
|
||||
```
|
||||
|
||||
**分析：**
|
||||
**弊端：**
|
||||
|
||||
使用工厂方法创建的对象，使用的构造函数都是Object。所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象。
|
||||
使用工厂方法创建的对象，使用的构造函数都是Object。**所以创建的对象都是Object这个类型，就导致我们无法区分出多种不同类型的对象**。
|
||||
|
||||
### 方式三：利用构造函数
|
||||
|
||||
```javascript
|
||||
//利用构造函数自定义对象
|
||||
var stu1 = new Student("smyh");
|
||||
console.log(stu1);
|
||||
stu1.sayHi();
|
||||
|
||||
var stu2 = new Student("vae");
|
||||
console.log(stu2);
|
||||
stu2.sayHi();
|
||||
|
||||
|
||||
// 创建一个构造函数
|
||||
function Student(name) {
|
||||
this.name = name; //this指的是构造函数中的对象实例
|
||||
this.sayHi = function () {
|
||||
console.log(this.name + "厉害了");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
接下来，我们专门来讲一下构造函数。
|
||||
|
||||
## 构造函数
|
||||
|
||||
|
||||
### new和this
|
||||
|
||||
**this：**
|
||||
|
||||
1、this只出现在函数中。
|
||||
|
||||
2、谁调用函数，this就指的是谁。
|
||||
|
||||
3、new People(); People中的this代指被创建的对象实例。
|
||||
### 代码引入
|
||||
|
||||
|
||||
**new之后：**
|
||||
```javascript
|
||||
// 创建一个构造函数，专门用来创建Person对象
|
||||
function Person(name, age, gender) {
|
||||
this.name = name;
|
||||
this.age = age;
|
||||
this.gender = gender;
|
||||
this.sayName = function() {
|
||||
alert(this.name);
|
||||
};
|
||||
}
|
||||
|
||||
（1）开辟内存空间，存储新创建的对象。new Object()
|
||||
function Dog() {}
|
||||
|
||||
（2）**把this设置为当前对象**
|
||||
var per = new Person("孙悟空", 18, "男");
|
||||
var per2 = new Person("玉兔精", 16, "女");
|
||||
var per3 = new Person("奔波霸", 38, "男");
|
||||
|
||||
（3）执行内部代码，设置对象属性和方法
|
||||
var dog = new Dog();
|
||||
```
|
||||
|
||||
（4）返回新创建的对象
|
||||
|
||||
### 构造函数和普通函数的区别
|
||||
|
||||
构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。
|
||||
|
||||
构造函数和普通函数的区别就是**调用方式**的不同：普通函数是直接调用，而构造函数需要使用new关键字来调用。
|
||||
|
||||
**this的指向也有所不同**：
|
||||
|
||||
- 1.以函数的形式调用时，this永远都是window。比如`fun();`相当于`window.fun();`
|
||||
|
||||
- 2.以方法的形式调用时，this是调用方法的那个对象
|
||||
|
||||
- 3.以构造函数的形式调用时，this是新创建的那个对象
|
||||
|
||||
### new 一个构造函数的执行流程
|
||||
|
||||
（1）开辟内存空间，存储新创建的对象
|
||||
|
||||
（2）将新建的对象设置为构造函数中的this，在构造函数中可以使用this来引用 新建的对象
|
||||
|
||||
（3）执行函数中的代码（包括设置对象属性和方法等）
|
||||
|
||||
（4）将新建的对象作为返回值返回
|
||||
|
||||
因为this指的是new一个Object之后的对象实例。于是，下面这段代码：
|
||||
|
||||
@ -145,7 +159,43 @@ console.log(o);
|
||||
|
||||
注意上方代码中的注释。
|
||||
|
||||
于是，便得出了接下来的代码。
|
||||
### 类、实例
|
||||
|
||||
使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个**类**。
|
||||
|
||||
通过一个构造函数创建的对象，称为该类的**实例**。
|
||||
|
||||
|
||||
### instanceof
|
||||
|
||||
使用 instanceof 可以检查**一个对象是否为一个类的实例**。
|
||||
|
||||
**语法如下**：
|
||||
|
||||
```javascript
|
||||
对象 instanceof 构造函数
|
||||
```
|
||||
|
||||
如果是，则返回true；否则返回false。
|
||||
|
||||
**代码举例**：
|
||||
|
||||
```javascript
|
||||
function Person() {}
|
||||
|
||||
function Dog() {}
|
||||
|
||||
var person1 = new Person();
|
||||
|
||||
var dog1 = new Dog();
|
||||
|
||||
console.log(person1 instanceof Person); // 打印结果： true
|
||||
console.log(dog1 instanceof Person); // 打印结果：false
|
||||
|
||||
console.log(dog1 instanceof Object); // 所有的对象都是Object的后代。因此，打印结果为：true
|
||||
```
|
||||
|
||||
根据上方代码中的最后一行，需要补充一点：**所有的对象都是Object的后代，因此任何对象和Object左instanceof检查时都会返回true**。
|
||||
|
||||
|
||||
## others
|
||||
@ -222,10 +272,6 @@ class Customer {
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## new一个构造函数的过程
|
||||
|
||||
- 1.开辟对内存空间，创建一个新的对象
|
||||
@ -237,7 +283,6 @@ class Customer {
|
||||
- 4.返回新创建的对象
|
||||
|
||||
|
||||
|
||||
## 原型对象
|
||||
|
||||
### 原型的引入
|
||||
@ -301,7 +346,6 @@ class Customer {
|
||||
|
||||
我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype。这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
|
||||
|
||||
|
||||
如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的实例对象中都会有一个隐含的属性，指向该构造函数的原型，我们可以通过__proto__来访问该属性。
|
||||
|
||||
原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
|
||||
@ -311,7 +355,6 @@ class Customer {
|
||||
以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样就不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了。
|
||||
|
||||
|
||||
|
||||
### 原型链
|
||||
|
||||
原型对象也是对象，所以它也有原型，当我们使用一个对象的属性或方法时，会现在自身中寻找，自身中如果有，则直接使用。如果没有则去原型对象中寻找。如果原型对象中有，则使用，如果没有则去原型的原型中寻找,直到找到Object对象的原型。Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。
|
||||
@ -7,12 +7,15 @@
|
||||
|
||||
前端入门和进阶学习笔记。从零开始学前端，做一个web全栈工程师。持续更新中...
|
||||
|
||||
PS：如果你发现文中的图片加载不出来，不妨[看这里](https://github.com/smyhvae/Web/issues/20#issue-390074432)。
|
||||
维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://zhuanlan.zhihu.com/p/55981212)
|
||||
|
||||
维护这个项目的初衷，可以看这篇文章：[裸辞两个月，海投一个月，从Android转战Web前端的求职之路](https://www.cnblogs.com/smyhvae/p/8732781.html)
|
||||
前端入门路线和推荐学习资源，可以看这篇文章：[2019年Web前端入门的自学路线](https://www.cnblogs.com/smyhvae/p/8776837.html)
|
||||
|
||||
前端入门路线和推荐学习资源，可以看这篇文章：[2018年Web前端入门的自学路线](https://www.cnblogs.com/smyhvae/p/8776837.html)
|
||||
### 项目指引
|
||||
|
||||
如果你发现文中的图片加载不出来，不妨[看这里](https://github.com/smyhvae/Web/issues/20#issue-390074432)。
|
||||
|
||||
如果你发现本项目有内容上的错误，欢迎提交 issues 进行指正。
|
||||
|
||||
### 学习交流
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user