企业网站模板2016成套,电子商务网站建设初学视频教程,室内设计学校专升本,7块钱建购物网站目录
前言
开篇语
准备工作
浅拷贝和深拷贝
浅拷贝
概念
常见方法
弊端
案例
深拷贝
概念
常见方法
弊端
逐层拷贝
原型
构造函数
概念 形式
成员
弊端
显式原型和隐式原型
概念
形式
constructor
概念
形式
原型链
概念
形式
结束语 前言
开篇语…目录
前言
开篇语
准备工作
浅拷贝和深拷贝
浅拷贝
概念
常见方法
弊端
案例
深拷贝
概念
常见方法
弊端
逐层拷贝
原型
构造函数
概念 形式
成员
弊端
显式原型和隐式原型
概念
形式
constructor
概念
形式
原型链
概念
形式
结束语 前言
开篇语
本系列博客主要分享JavaScript的进阶语法知识本期为第八期依然围绕ES6的语法进行展开。
本期内容为拷贝和原型。
与基础部分的语法相比ES6的语法进行了一些更加严谨的约束和优化因此在之后使用原生JS时我们应该尽量使用ES6的语法进行代码编写。
准备工作
软件【参考版本】Visual Studio Code
插件扩展包Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap
提示在不熟练的阶段建议关闭AI助手
浏览器版本Chrome
系统版本 Win10/11/其他非Windows版本
浅拷贝和深拷贝
浅拷贝
概念
对于基本数据类型它们存储于栈内存中浅拷贝直接就是把这份数据复制一份依然存储在栈内存中。
而对于引用数据类型在栈内存中存储的只是指向堆内存中数据的地址。浅拷贝只能复制这个地址而不能真正复制里面的数据。
简而言之浅拷贝只能实现复制一层。
常见方法
ES6提供的浅拷贝的方式为Object.assign()JQuery也为我们提供了$.clone()方法。
弊端
由于浅拷贝只能复制引用类型数据的地址所以复制之后的“所谓的新变量”实际上和原来的变量还是指向了堆内存中相同的数据。
那么当我们修改“新变量”中的数据时原来的变量下存储的数据同样被改变了。
案例
来看下面的例子—— let obj1 {name: aa, age: 18} let obj2 obj1; obj2.age 20; console.log(obj1) 此时输出结果为 很显然我们的目的明明只是更改obj2的数据最后却将obj1的数据更改了。
深拷贝
概念
对于引用类型的数据我们需要创建一个新的空对象对数据内部的每一项都进行拷贝并添加到空对象中以此达到真正的意义上的拷贝。
有时我们对象中的数据也可能是引用类型的乃至在这些数据中还有多层的引用类型数据嵌套。我们的深拷贝应该不断深入至数据项的每一层确保每一层都进行拷贝。
简单来说深拷贝就是多层拷贝逐层进行拷贝。
常见方法
我们知道JSON的stringify()方法可以按照对象原来的格式结构进行复制而parse()方法又可以将它们转换回对象。 JSON.parse(JSON.stringify(obj)) 在两次转换的过程中parse()实际上返回了一个新的对象由此我们就实现了引用数据类型的深拷贝。
弊端
然而使用JSON转化的方式实现深拷贝会带来如下的问题——
对象属性的enumerable: false会失效Date数据类型会被转化为字符串RegExpError数据类型会被转换成空对象 {}undefinedfunctionsymbol的属性会丢失NaN-InfinityInfinity将会被转化为null
这就会导致我们复制的新对象和原对象的数据可能会出现差异造成拷贝失败的后果。
逐层拷贝
对此我们处理上述问题的思路是不一次性全处理而是分开应对各类情况。
由于我们的数据项中可能依然有引用数据类型或多层的结构所以我们要不断地向深层进行搜索而递归方法就能很好的解决多层搜索的问题即在遇到某些引用类型的数据时重复搜索-拷贝的步骤。
假设我们的递归方法的名称为deep(ori)传入的参数ori为待拷贝变量方法内部返回拷贝后的结果的变量res。
首先判断这个变量是否为引用数据类型即使用typeof运算符得到的结果为Object如果不是则为基本数据类型直接使用赋值运算符复制即可。
if (typeof ori object) {} else {res ori
}
然后利用构造器constructor判断数据是否为RegExpDate和null中的一种如是则依然直接使用复制。
这三种情况下数据不会是多层的结构不需要再进入数据内部拷贝深层。
if (ori.constructor RegExp || ori.constructor Date || !ori) {res ori
}
然后判断数据是否为Array类型这种类型的数据可以存储元素所以需要对其进行遍历。
而Array的每一项依然可能为Array或对象等可以存储元素的结构因此还需要对遍历的每一项item再进行一次deep(item)递归。
else if (ori.constructor Array) {res []ori.forEach(item res.push(deep(item)))
}
最后剩下的情况就是对象类型使用类似处理数组的方式处理即可。
else {res {}for (let key in ori) {res[key] deep(ori[key])}
}
最后逐层拷贝的完整代码如下—— function deep(ori) {let res;if (typeof ori object) {if (ori.constructor RegExp || ori.constructor Date || !ori) {res ori} else if (ori.constructor Array) {res []ori.forEach(item res.push(deep(item)))} else {res {}for (let key in ori) {res[key] deep(ori[key])}}} else {res ori}return res}
原型
构造函数
概念
构造函数是我们用来创建实例化对象的方法它将传入的参数赋值给this中对应的属性。它的this指向为创建出来的实例化对象。 形式
比方说我们想要用构造函数Per来创建人对象那么我们可以这样来写Per()方法—— function Per(name, age, sex) {this.name name;this.age age;this.sex sex;this.getMsg function () {console.log(姓名${this.name}年龄${this.age}性别${this.sex}。);}}
成员
构造函数的成员是指构造函数内部的属性分为实例成员和静态成员两种。
实例成员是构造函数内通过this创建的成员这类成员的特点是可以被实例化也就是可以使用下面的形式去访问—— 实例.成员 静态成员是构造函数外通过构造函数名创建的成员这类成员的特点是不可以被实例访问但是只能使用下面的形式去访问—— 构造函数名.成员 弊端
我们知道方法也是可以作为构造函数的实例成员的。
比如我们创建两个人对象——
let aa Per(aa, 22, man);
let bb Per(bb, 20, man);
对于它们的getMsg()成员使用进行比较显然是不同的。
console.log(aa.getMsg bb.getMsg); // false
因此这种方式存在一个问题就是我们每创建一个实例化对象调用一次方法就需要开辟一块新的栈空间来完成一件重复的事造成内存浪费的问题。
所以我们需要使用一块公用的空间来存储同一个构造函数创建出来的公用方法。
如果使用静态成员方法由于它不能被实例对象访问所以方法的this将会失效。
显式原型和隐式原型
概念
原型实际上就是一块空间用来存储一些构造函数和实例化对象的公用方法与属性。
当我们使用到这些公用的内容时就可以利用原型来访问由此达到节省空间的目的。
对于构造函数使用prototype来获取原型这类原型就是显式原型
对于实例化对象使用__proto__来获取原型注意两边都有两个_哈这类原型就是隐式原型。
对于构造函数和它实例化的对象它们的显式原型和隐式原型相同。
形式
将上面的getMsg()方法添加到原型中就像下面这样——
Per.prototype.getMsg function () {console.log(姓名${this.name}年龄${this.age}性别${this.sex}。);
}
那么对于Per构造函数创建出来的所有实例化对象都可以调用原型的getMsg()方法。
对于下面的两种方式调用getMsg()实际上访问的是内存中的相同位置——
console.log(Per.prototype aa.__proto__); // true
constructor
概念
constructor中文释义为构造函数用来从原型指回原来的构造函数。
我们可以在原型中声明多个方法然后利用constructor把它们一次性交给原来的构造函数。
形式
使用下面的三个方法将Per实例化对象的nameagesex属性分别输出出来—— Per.prototype {constructor: Per,getName() {console.log(this.name);},getAge() {console.log(this.age);},getSex() {console.log(this.sex);}}
原型链
概念
原型链实质上就是链式查找方法。
如果在调用方法时自身没有方法则程序会在原型链上查找方法。
一条完整的原型链为实例构造函数原型Objectnull(报错)Object是所有构造函数、对象的原型又叫做基类。
如果在基类上依然没有找到我们需要的方法则程序会向我们报错提示没有该方法。
形式
最长的原型链如下—— 实例化对象.prototype.__proto__.__proto__ 在该位置仍然找不到目标方法时报错。
整个原型链的各个部分的转化关系示意图如下—— 结束语
本期内容到此结束。关于本系列的其他博客可以查看我的JS进阶专栏。
在全栈领域博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历然后把自己领悟到的一些东西总结一下分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的一些定义性的文字加入了笔者自己的很多理解在里面所以仅供参考。如果有说的不对的地方还请谅解。
期待与你在下一期博客中再次相遇
——临期的【H2O2】
