diff --git a/02-CSS/05-CSS样式表的继承性和层叠性.md b/02-CSS/05-CSS样式表的继承性和层叠性.md index f9e21ea..fa1172c 100644 --- a/02-CSS/05-CSS样式表的继承性和层叠性.md +++ b/02-CSS/05-CSS样式表的继承性和层叠性.md @@ -132,7 +132,6 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1 ![](http://img.smyhvae.com/20170727_0843.png) - 另外：**如果大家的权重相同，那么就采用就近原则：谁描述的近，听谁的**。举例如下：(box3 描述得最近，所以采用 box3 的属性) ![](http://img.smyhvae.com/20190122_1530.png) diff --git a/03-JavaScript基础/07-对象简介.md b/03-JavaScript基础/07-对象简介和对象的基本操作.md similarity index 100% rename from 03-JavaScript基础/07-对象简介.md rename to 03-JavaScript基础/07-对象简介和对象的基本操作.md diff --git a/03-JavaScript基础/11-this.md b/03-JavaScript基础/11-this.md index 2ad6cff..ccaeb7a 100644 --- a/03-JavaScript基础/11-this.md +++ b/03-JavaScript基础/11-this.md @@ -89,8 +89,11 @@ ES6中的箭头函数并不会使用上面四条标准的绑定规则，而是会继承外层函数调用的this绑定（无论this绑定到什么）。 + ## arguments（待定） +> 这部分，小白可能看不懂。所以，这一段，可以忽略。 + 在调用函数时，浏览器每次都会传递进两个隐含的参数： - 1.函数的上下文对象 this diff --git a/03-JavaScript基础/18-对象的创建、构造函数和原型.md b/03-JavaScript基础/12-对象的创建、构造函数和原型.md similarity index 73% rename from 03-JavaScript基础/18-对象的创建、构造函数和原型.md rename to 03-JavaScript基础/12-对象的创建、构造函数和原型.md index 1e1f43a..da7f526 100644 --- a/03-JavaScript基础/18-对象的创建、构造函数和原型.md +++ b/03-JavaScript基础/12-对象的创建、构造函数和原型.md @@ -1,18 +1,6 @@ - - -## 面向对象的概念 - -**对象的作用是：封装信息**。比如Student类里可以封装学生的姓名、年龄、成绩等。 - -那为什么不用数组封装信息呢？首先，数组只能存放同一种类型的数据；其次，要... - -对象具有**特征**（属性）和**行为**（方法）。 - -面向对象：可以创建自定义的类型、很好的支持继承和多态。 - -面向对象的特征：封装、继承、多态。 + > 在看本文之前，可以先复习前面的一篇文章：《03-JavaScript基础/07-对象简介和对象的基本操作.md》 ## 创建自定义对象的几种方法 @@ -39,35 +27,7 @@ console.log(o); ![](http://img.smyhvae.com/20180125_1834.png) -### 方式二：利用构造函数 - - -```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 + "厉害了"); - } - } -``` - -打印结果： - -![](http://img.smyhvae.com/20180125_1350.png) - - -### 方式三：工厂模式 +### 方式二：工厂模式 通过该方法可以大批量的创建对象。 @@ -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 + "厉害了"); + } + } +``` + +打印结果： + +![](http://img.smyhvae.com/20180125_1350.png) + +接下来，我们专门来讲一下构造函数。 ## 构造函数 - -### 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。 diff --git a/README.md b/README.md index 06461ce..a66a963 100644 --- a/README.md +++ b/README.md @@ -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 进行指正。 ### 学习交流