文章目录

前言
一、包装类型
- 1.String
- 2.Number
- Boolean
- 补充两个公共方法
二、面向对象
- 1.封装
- 2.原型对象【显示原型】
- 3.继承
- - 3.1继承
  - 3.2继承优化
- 4.原型链
三、This
- 1.this指向
- 2.严格模式
- 3.改变this指向
四、class类
- 1.类中添加成员
- 2.类中有特殊的构造函数constructor
- 3.类之间的继承extends
- - 3.1super
四、拷贝
- 1.浅拷贝
- 2.深拷贝
总结

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、包装类型

定义：我们把经过包装后的简单数据类型叫做包装类型，包装类型也能使用属性和方法

<script type="text/javascript">//对象才有 属性，方法let str = 'abcd';//逻辑上：简单数据类型不能用方法// str.replace(); str是简单数据类型 却还是能用方法：这是因为在程序内部在调用方法的瞬间会把str简单数据类型进行包装，我们把经过包装后的简单数据类型叫做包装类型// let str = new String('abc');// console.log(str);</script>

1.String

== 定义：内置的构造函数，用于创建字符串==
创建字符串的两种方式：字面量创建和new String（）创建对象

字符串有length和索引号：

字符串trim()方法：用于去除字符串首尾两端的空白字符

字符串split()方法：
用字符串C分割，则把字符串的C都变成了逗号，如果不想去C，则可以传入空串；分割之后的每一项都放在数组中并且返回

字符串toLowerCase()方法：把字母转换为小写；与之相反的是toUppercase（）

字符串indexOf()方法：:查找某个元素首次出现的索引值。找不到返回-1；同理 lastIndexOf（）：查找某个元素尾次出现的索引值，找不到返回-1

字符串slicef()方法：截取字符串和subString（）一模一样唯一的区别：subString（大索引，小索引）会自动变为subString（小索引，大索引），而slicef()不会
注意：这两个方法，如果参数只有一个索引值，那么从这个索引值的位置一直截取到最后

substr():截取字符串

2.Number

== 定义：内置的构造函数，用于创建数字==
== 注意：parseInt和parseFloat在新版本中已经归属于在Number之内了：Number.parseFloat()==
数值的toFixed（）方法：用于保留几位有效数字（遵循四舍五入，保留两位看第三位）

Boolean

== 定义：内置的构造函数，用于创建布尔值==

补充两个公共方法

注意：undefined和null没有这个两个公共方法，因为他们两个是具体值

二、面向对象

面向对象的三个特征：封装、继承、多态

1.封装

2.原型对象【显示原型】

定义：就是函数的一个属性 prototype；每一个函数的prototype属性指向了一个对象，我们把这个对象叫做原型对象或者原型，每个原型对象都有constructor属性，这个属性的值就是它对应的构造函数
出现的原因：当我们通过构造函数和new关键字实例化一个对象的时候，就会开辟一块空间存放着这个对象的属性和方法，但是实例化多个对象之后，他们的方法却是一样的，但仍然占用了空间的内存；
作用：用来存放构造函数的方法（共享方法），减少内存空间的占用
所有实例化对象都能够共享原型对象的成员
注意：当实例化对象在构造函数中没有找到内容就会去原型对象找，如果在构造函数中找到内容就不会去原型对象中查找
==捋一捋：==每个函数都有prototype属性，函数的prototype属性指向的是一个对象（我们称为原型对象），（既然是对象就可以有属性和方法），这个对象有个自带属性是constructor，属性值是：原型对象对应的函数
在原型对象中添加方法：
原型对象的constructor
作用：用来找到原型对象的构造函数
注意：所有原型对象都有constructor属性，原型对象的constructor属性指回原型对象的构造函数

  <script>function F1() {name: '李白'}console.log(F1); //打印函数console.log(F1.prototype.constructor);//原型对象的constructor指向的是构造函数本身 也就是F1</script>

分析一：当我们实例化一个对象之后，想要通过这个实例对象找到它的构造函数应该怎么找？
答案：通过对象名.constructor 就可以找到它的构造函数
具体的查找过程：对象中本身是没有constructor这个属性的，当实例对象找不到成员，就会利用每个对象都有的proto属性去原型对象中查找成员
构造函数、实例对象、原型对象的关系：

每一个对象都有__proto__属性【对象原型，隐式原型】(两个下划线proto两个下划线)，
==作用：==用于指向原型对象

3.继承

继原型对象回顾内容
构造函数相当于模板，模板内存放着公共内容；构造函数中的方法一般放在【添加】构造函数的原型对象里面

3.1继承

我们继承的内容一定是公共的内容，我们将公共内容提取并装到对象中
实例化一个中国人，中国人本应该要有对象中的属性但是没有，所有要想办法让实例对象（所有实例对象）继承这公共内容，我们可以把公共内容给对象的 _ _proto _ _属性（原型）：因为实例对象找不到成员时回去原型中找；我们将存放着公共属性的对象赋值给原型对象，这样原型对象就保存了这些公共成员，但是原型对象默认自带的constructor属性就被覆盖而消失了，这不是我们想看到的，所以我们还需要给这个原型对象手动添加回去constructor: 添加：Chinese.prototypr.constructor=Chinese; 但是通过其他构造函数（如：Japanese）new出来的实例化对象如果也要继承同一块公共内容，如果还是如上述操作那般，则必然会发生：将对象的公共内容赋值给Japanese的原型对象：Japanese.prototype=obj; 注意：这是将对象赋值给对象，引用传递传递的是地址，然后再给Japanese原型对象恢复自带的constructor属性：这时Chinese的原型对象的constructor属性值却是：构造函数Japanese ；出现这样的情况就是：因为在这之前执行了Japanese.prototype=obj; 将之前Chinese的原型对象进行了修改，使得Chinese的原型对象的constructor被换成了当前最新的Japanese的原型对象的constructor；所以通过这种方式的继承是有缺点的；这种继承方式分两步：第一步：将含有公共成员的对象赋值给构造函数的原型对象，第二步：给原型对象添加constructor属性并且指回当前的构造函数

3.2继承优化

对于之前继承的方式：我们是把一个具体定义的字面对象赋值给构造函数的原型对象；这次我们将对象赋值给构造函数的原型对象
==注意区别：==实例化对象是通过new构造函数赋值实现的；其实 new 构造函数本身就是对象了，赋值只是将对象具体、化实例化
==优化之后：==通过将new 构造函数赋值给构造函数的原型对象就不会出现上面的constructor问题了，优化之后：通过对应的构造函数new出来的对象，它的原型对象的自带属性constructor指向的函数也是对应的

   <script>// 构造函数 人function Person() {this.head = 1;this.eyes = 2;this.legs = 2;this.say = function () { console.log('say'); }this.eat = function () { console.log('eat'); }}// 构造函数 中国人function Chinese() {this.language = '汉语';this.skin = 'yellow';}// 继承:// 1、把对象赋值给原型对象 Chinese.prototype = 对象   之前是实例化对象 这次是对象 ；new 构造函数就是一个对象 之前不过是赋值的方式进行了对象的实例化Chinese.prototype = new Person();// 2、指回构造函数本身Chinese.prototype.constructor = Chinese;let c1 = new Chinese();console.log(c1);//----------------------------------------- 构造函数 日本人function Japanese() {this.language = '日语';this.skin = 'white';}//进行继承人 1、把对象赋值给原型对象Japanese.prototype = new Japanese();// 2、指回构造函数本身Japanese.prototype.constructor = Japanese;let j1 = new Japanese();console.log(j1);</script>

4.原型链

定义：由原型构成的链状结构
作用：提供查找成员的方法；类似于作用域链，当在这个原型找不到就去深一层的原型中查找成员

三、This

1.this指向

1.== 普通函数内的this指向window==；理解：因为在调用函数的时候是window在调用，只不过我们通常省略了window
2. 构造函数的this指向当前实例化的对象；
3. 方法中的this指向调用者对象
4. 事件处理函数的this指向事件源
5. 定时器调用函数中的this指向window

2.严格模式

开启严格模式：'use strict ';在你需要开启严格模式的作用域内置于第一句位置
遵守

变量必须先定义后使用
普通函数中的this指向undefined
函数中的形参不能重名

3.改变this指向

·函数都有这三个方法
call
函数.call（）：第一个参数是你要将this指向的新目标，不想改变则写null，其余在第一个参数后面的都是给函数准备的
注意：函数调用call，同时call会调用函数执行，在函数执行的同时改变this指向

apply
函数apply（）：和call相同；不同的是第二个参数是数组
应用场景：和数组打交道

apply应用场景

bind
函数bind（）：第一个参数是你要将this指向的新目标，但是在改变this指向之后函数并不会调用；而是返回改变this之后的函数；所以返回的是一个函数！！！
==什么时候使用bind:==想改变this 但是不想让函数立刻执行；此时适合用bind

在定时器中使用binid：

扩展： … rest剩余参数用于函数参数和解构赋值中； …也叫扩展运算符，在数组、字符串、对象中都是展开的意思；效果如下图：将数组的中括号拆开

四、class类

定义： class是关键字，专门用于创建类的，类可被用于实现逻辑的封装，在ES6中用class创建对象
定义类语法： class 类名 {} 类名参考构造函数的函数名规范
==类的内容：==封装一些公共成员
实例如下：
实例化的类仍然是一个对象

1.类中添加成员

成员由静态成员和实例成员
类中每个成员之间用分号隔开
类中添加静态成员用static关键字
在类中添加方法不能再写function关键字了直接：static eat(){} 静态成员只能类/构造函数调用
不加static关键字的就是实例成员对象使用实例成员

2.类中有特殊的构造函数constructor

constructor是一个特殊的方法，不论我们写不写，都会自动创建这个，在实例化对象的时候通过constructor构造的函数会自动执行
应用场景： constructor通常用于接收参数，做初始化

3.类之间的继承extends

3.1super

先调用super；再设定自己的成员

分析super
super用于调用父类的constructor方法或者普通方法
明星类继承人类，在明星类中添加自己的属性在constructor中，但是uname,age,sex和人类一样，所以可以继续继承Person,可以用super（uname,age,sex）表示继续继承Person，但是要放在当前语句块的第一句，在super语句之后再添加自己的成员

四、拷贝

拷贝不是直接赋值

1.浅拷贝

==定义：==只拷贝外面一层的简单类型数据，如果在第一层中还有复杂数据类型，浅拷贝仍然是将地址赋值过去

==Object.assign（）：==专门实现浅拷贝；newObj是空对象；obj是有内容的对象

2.深拷贝

==定义：==所有层都拷贝了

==注意：==浅拷贝过程中对象名都写死了；所以封装一个拷贝函数
在这里插入图片描述

总结

提示：这里对文章进行总结：

day3-JS之高级语法相关推荐

webpack打包处理js文件中的高级语法
前言在js文件中定义一个User类 import $ from 'jquery' import './css/at.css' import './css/at.less' import './css ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
JS的基本语法知识概括（ECMA、DOM、BOM）
1.javaScript的简介: 1.理解: js是一种解释性.即使编译的编程语言.应用于web应用的脚本语言,非web环境下也可以使用 2.作用: 1.js可以实现html标签的动态效果 2.js可 ...
快捷方便的对js文件进行语法检查。
一直使用http://www.jslint.com/的js语法检查工具对javascript进行语法检查. 我将主页另存为一个mht文件,可以直接在本地进行检查,不用每次都联网.不久前将操作系统有20 ...
【实习日记】第五天剖析源码＋学习Node.js Typescript基本语法
国庆假期结束了,其实在这里实习对我而言还算是比较愉快的,虽然完成任务过程中出现的问题层出不穷,但也被克服问题的成就感包裹着,感觉每天在办公室就像在上自习一样.加油啦小荷! 自从把example运行成功 ...
JavaScript|JavaScript 高级语法——详细汇总
JavaScript 高级语法目录 JavaScript 高级语法一.变量提升和函数提升作用域的概念 1. 变量提升 ① 变量提升 ② 变量提升后,与外界同名变量不会相互影响 ③ 多次声明变量 ...
web前端dya07--ES6高级语法的转化rendervue与webpackexport
js处理类语法 webppack无法处理一些ES6的高级语法,需要babel来处理,比如类. 1.装包 2.配置正则 3.配置.babelrc文件 render渲染组件 <!DOCTYPE ht ...
Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充自定义指令认识自定义指令实现方式一:默认实现实现方式二:局部自定义指令方式三:自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 ...
【selenium自动化】04 xpath高级语法css高级语法
xpath高级语法 # /html/body/section/div[1]/div[3]/ul/li[2]/a/i # xpath使用路径表达式来匹配xml文档或html文档中的节点或节点集 # 这个 ...
深入 JavaScript 高级语法
深入 JavaScript 高级语法点击 28. 深拷贝.事件总线 27. 防抖和节流 26. BOM.DOM.浏览器事件 25. Cookie 24. IndexedDB 23. JSON.Sto ...

day3-JS之高级语法