# homework-fe-02-04

**Repository Path**: sfljskeprim_admin/homework-fe-02-04

## Basic Information

- **Project Name**: homework-fe-02-04
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

1. **简答（标注好题号，整合为一个md文件）**

   1. 简述面向对象的设计思想。

   > 面向对象是对单个事物的抽象，封装了属性(对象的状态)和方法(对象的行为)
   >
   > 面向对象编程简称为OOP是一种编程思想，将真实世界中的各种复杂关系抽象成一个个对象，由对象分工与合作。
   >
   > 面向对象具有：封装性、继承性、多态性的特性

   2. 简述什么是静态成员和实例成员。

   > 实例成员：在构造函数内部添加给this的成员属于实例对象的成员，在创建实例对象后必须由对象调用。
   >
   > 静态成员：添加给构造函数自身的成员，只能使用构造函数调用，不能使用生成的实例对象调用。

   3. 使用原型对象时，如何设置对象的成员。

   > prototype 原型对象，任何函数都具有一个prototype属性，原型对象与构造函数和实例对象的关系：
   >
   > Person.prototype -> Person的原型对象
   >
   > Person.prototype.constructor -> Person 构造函数本身
   >
   > p1 = new Person() 实例对象
   >
   > p1.`__proto__` -> Person.prototype
   >
   > p1实例对象调用属性和方法首先从实例对象本身查找，如果没有就会通过`__proto__`查找原型对象设置的成员。

   4. 简单介绍面向对象编程中，自调用函数的作用。

   > 自调用函数又称为立即执行函数,IIFE.就是将函数矮化成表达式， 在function前面加上 + - () ! 都可以将函数矮化成表达式。

   ```javascript
   var foo = function(){
       console.log("test");
   }();//也可以实现立即执行IIFE 就是将函数矮化成表达式
   
   //例如： + - () ! 都可以将函数矮化成表达式
   +function f111(){
       console.log("f111");//f111
   }();
   
   -function f112(){
       console.log("f112");
   }();
   
   //() 就是IIFE的经典实现 自执行函数
   (function(){
       console.log("IIFE");
   })();
   
   !function f113(){
       console.log("f113");
   }()
   
   for (var index = 0; index < 5; index++) {
       //IIFE 可以实现单独的作用域环境，不会污染外部,同时也会保存传递过来的参数值，不用担心var的问题
       (function(index){
           setTimeout(() => {
               console.log("index:"+index);
           }, index);
       })(index);
   }
   ```

   

   5. 简述面向对象编程的思路。

   > 面向对象编程是将某一类进行抽象成类型，该类中具有描述类型的属性和方法。面向对象具有封装、继承和多态的特性，描述对象的特征和行为，通过不同的类型完成不同的功能，程序通过类的实例处理实际的问题。

   6. 简述原型链查找过程。

   > 每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性：
   >
   > 1. 搜索首先从对象实例本身开始
   > 2. 如果实例中找到了具有给定名字的属性，则返回该属性的值
   > 3. 如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性
   > 4. 如果在原型对象中找到了这个属性，则返回该属性的值

   ![image-20211123163317032](C:\Users\JakePrim\Desktop\image-20211123163317032.png)

   7. 描述函数声明与函数表达式的区别。

   > 函数声明必须有名字
   >
   > 函数声明会函数提升，在预解析阶段就已创建，声明前后都可以调用
   >
   > 函数表达式类似于变量赋值
   >
   > 函数表达式可以没有名字，可以是匿名函数
   >
   > 函数表达式没有函数提升，在执行阶段创建，必须在表达式之后才可以调用

   8. 描述call、apply和bind方法各自的功能和特性。

   > call: 修改this的指向，通过逗号分隔传递参数，直接执行函数。
   >
   > apply：修改this的指向，通过数组传递参数，直接执行函数。
   >
   > bind：修改this的指向，可以传递部分参数或全部参数，返回一个新的函数，不会立即执行函数，通过新函数可以传递剩余的参数进行执行函数。

   9. JavaScript中callee和caller有何作用。

   > callee 函数本身，arguments的一个属性
   >
   > caller：函数的调用者，如果在全局调用，返回调用者为null

   10. 什么是闭包？闭包的特点是什么。

   > 闭包就是内层函数中访问到外层函数的作用域就产生了闭包，当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
   >
   > 闭包是天生存在的，不需要额外的结构，需要利用一些特殊的结构将一个父函数内部的子函数拿到父函数外部进行调用。

   11. let、const、var定义变量的区别是什么

   > 1. 重复声明： var 允许重复声明，let和const不允许重复声明
   > 2. 变量提升：var会提升变量的声明到当前作用域的顶部，let和const不存在变量提升，遵循先声明后使用的原则
   > 3. 暂时性死区：let和const所声明的变量或常量会自动绑定这个区域，不再受外部作用域的影响
   > 4. 块级作用域：let和const会作用于块级作用域上
   > 5. const 常量，必须声明时赋值，且只能赋值一次不能更改引用，如果是对象可以更改对象的内部成员
   > 6. window对象的属性和方法：在全局作用域中var声明的变量，通过function声明的函数会自动添加到window对象的属性或方法。let和const不会。

   12. 箭头函数与普通函数的区别是什么

   > 箭头函数和普通函数的区别在于箭头函数不会改变this的指向。
   >
   > 箭头函数没有括号，则作为结果返回，多行代码需要使用括号，并且返回需要使用return

   13. set和数组的区别是什么？set中如何增加、删除元素

   > Set 集合不会有重复的数据，而数组可以有重复的数据，Set通过add方法增加元素，通过delete方法删除元素

   14. ES6中如何实现类的继承

   > ES6中的类通过extends关键字继承父类.

   ```javascript
       //ES5的继承方式
       function Student5(name, age, score) {
           Person5.call(this, name, age);//继承父类的属性
           this.score = score;
       }
   
       Student5.prototype = new Person5();//继承父类的方法
       Student5.prototype.constructor = Student5;
   
       const s5 = new Student5("es5", 15, 90);
       s5.say();
   
       //ES6 继承 extends
       class Student extends Person {
           constructor(name, age, score) {
               super(name, age);
               this.score = score;
           }
   
           hello() {
               super.say();//调用父类的方法
               console.log(`name:${this.name} - score:${this.score}`)
           }
       }
   
       const s = new Student("ww", 19, 80);
       s.hello();//name:ww - score:80
   ```

   

   15. 类中的static关键字有什么作用

   > ES6中类中的static关键字用来定义静态成员。

   

   16. 类中的静态方法与普通函数的区别？如何定义静态方法

   > 静态方法中不能调用实例的属性和方法，静态方法this指向的不是实例对象而是Class本身，可以调用静态变量。
   >
   > 普通方法this指向实例对象，必须通过Person.xxx调用静态的方法或属性，通过this调用实例的属性和方法。

   ```javascript
       //ES6 通过class关键字定义类型
       class Person {
           //静态变量
           static names = "ls";
   
           //构造函数
           constructor(name, age) {
               this.name = name;
               this.age = age;
           }
   
           //实例方法
           say() {
               //实例对象的中的方法不能访问 静态的成员
               console.log(`name:${this.name} ${Person.names}`);
           }
   
           //静态方法
           static create(name, age) {
               console.log(`names:${this.names}`);
               //静态方法的this不是指向某个实例对象的，而是class自己
               return new Person(name, age);
           }
       }
   ```

   代码练习（每题请使用一个单独的html文件，最后两题请使用单独的文件夹）

   

   1. 使用解构赋值，实现两个变量的值的交换

   

   2. 使用set实现数组去重

   

   3. 使用箭头函数改写下列代码

     arr.forEach(*function* (*v*, *i*) {

   ​    console.log(v, i)

     })

   

   4. 检测是否是数字，包括整数，小数

   

   5. 检测是否是本地电话，如010-12345678,0418-12345678

   

   6. 将用户输入的网址全部转化成我们的官网。如www.baidu.com=>www.lagou.com

   

   7. 实现trim(str)方法，过滤字符串首位空白

   

   8. 获取<p class='demo'>hello JavaScript</p>内部文案

   

   9. 将div#demo.demo转化成<div id="demo" class="demo"></div>

   

   10. 检测是否是2到4位汉字

   

   11. 检测昵称是否是有汉字字母数字下划线组成，6-8位

   

   12. **独立完成**贪吃蛇（离开视频与笔记，脱离课堂案例，自己整理思路完成）

   

   13. 自己写一个类似的小游戏（不限类型，使用面向对象开发，选做）