长沙网站建设专家软件开发公司简介范文

长沙网站建设专家,软件开发公司简介范文,wordpress怎么安装老版编辑器,做恒指网站欢迎使用我的小程序#x1f447;#x1f447;#x1f447;#x1f447; 俱好用助手功能介绍 你好#xff01;如果你曾觉得JavaScript的原型链像魔法一样神秘#xff0c;那么今天我要告诉你一个秘密#xff1a;它其实就像一份家族传家宝#xff0c;代代相传#xff0c…欢迎使用我的小程序 俱好用助手功能介绍你好如果你曾觉得JavaScript的原型链像魔法一样神秘那么今天我要告诉你一个秘密它其实就像一份家族传家宝代代相传永远不会丢失一个神奇的现象让我们先来看一段代码感受一下原型链的神奇之处// 创建一个简单的对象constperson{name:小明,age:25};// 我们从来没有给person添加过toString方法// 但它居然能用console.log(person.toString());// 输出: [object Object]是不是很神奇我们没有给person对象定义toString方法但它却可以调用这个方法这就是原型链的魔力。揭开神秘面纱什么是原型链想象一下你家里有一份“家族传家宝”——一本记录了所有家族成员共同特征的族谱。每个新出生的孩子都会自动“继承”这些家族特征比如姓氏、家族传统等。在JavaScript中每个对象都有一个隐藏的“族谱”我们称之为“原型”prototype。当你访问一个对象的属性或方法时如果这个对象自己没有JavaScript就会自动去它的“族谱”原型里找如果还没找到就继续去原型的原型里找…这样一级一级往上找就像沿着家族树往上追溯直到找到为止或者直到最顶层也没找到返回undefined。这就是原型链让我们“可视化”原型链1. 构造函数家族的“创始祖先”// 创建一个“家族”的蓝图functionPerson(name,age){this.namename;this.ageage;}// 给这个家族的所有成员添加一个共同技能Person.prototype.sayHellofunction(){console.log(你好我是${this.name}今年${this.age}岁);};这里Person就像一个家族的创始人而Person.prototype就是家族的“传家宝”族谱记录了所有家族成员共有的特征和方法。2. 创建家族成员// 创建两个家族成员constxiaomingnewPerson(小明,25);constxiaohongnewPerson(小红,23);// 他们都有自己的独特属性console.log(xiaoming.name);// 小明console.log(xiaohong.name);// 小红// 但他们共享同一个“传家宝”中的方法xiaoming.sayHello();// 你好我是小明今年25岁xiaohong.sayHello();// 你好我是小红今年23岁有趣的是虽然sayHello方法不在xiaoming和xiaohong自己身上但他们都能通过“家族传家宝”访问到它看看原型链是如何连接的让我们来追踪一下这个家族关系// xiaoming自己的属性console.log(xiaoming.hasOwnProperty(name));// trueconsole.log(xiaoming.hasOwnProperty(sayHello));// false// 但sayHello在它的原型上console.log(Person.prototype.hasOwnProperty(sayHello));// true// 看看原型链的连接console.log(xiaoming.__proto__Person.prototype);// trueconsole.log(Person.prototype.__proto__Object.prototype);// trueconsole.log(Object.prototype.__proto__);// null - 到头了图解原型链家族树xiaoming │ ├── 自己的属性: name, age │ └── __proto__ → Person.prototype │ ├── 家族共享: sayHello() │ └── __proto__ → Object.prototype │ ├── 全宇宙共享: toString(), valueOf()... │ └── __proto__ → null (宇宙的尽头)有趣的实验沿着原型链“寻宝”让我们玩一个游戏看看JavaScript如何沿着原型链寻找属性// 创建一个“寻宝地图”functionGrandParent(){this.grandparentSecret我是爷爷的秘密;}functionParent(){this.parentSecret我是爸爸的秘密;}functionChild(){this.childSecret我是孩子的秘密;}// 建立家族关系Parent.prototypenewGrandParent();Child.prototypenewParent();constchildnewChild();// 开始寻宝console.log(child.childSecret);// 1. 自己身上找到 ✓console.log(child.parentSecret);// 2. 爸爸身上找到 ✓console.log(child.grandparentSecret);// 3. 爷爷身上找到 ✓console.log(child.toString);// 4. 祖传的toString方法 ✓console.log(child.alienSecret);// 5. undefined - 没这个宝物现代JavaScript中的原型链ES6引入了class语法让原型链的使用更加直观classAnimal{constructor(name){this.namename;}speak(){console.log(${this.name}发出声音);}}classDogextendsAnimal{constructor(name,breed){super(name);this.breedbreed;}bark(){console.log(${this.name}${this.breed}汪汪叫);}}constmyDognewDog(旺财,金毛);myDog.speak();// 继承自AnimalmyDog.bark();// 自己的方法虽然语法变了但底层还是那个熟悉的原型链为什么原型链很重要内存高效共享方法只需要存储一次而不是每个对象都复制一份代码复用通过继承可以轻松扩展和重用代码动态扩展可以在运行时修改原型所有实例都会自动获得新能力// 给所有数组添加一个有趣的方法Array.prototype.sayHellofunction(){console.log(我是一个数组我有${this.length}个元素);};[1,2,3].sayHello();// 我是一个数组我有3个元素注意在实际项目中修改内置对象的原型通常不是好主意这只是一个演示总结JavaScript的原型链就像一份家族传家宝每个对象都有自己的小秘密属性但也共享家族的共同财富原型方法当你寻找某个属性时JavaScript会像寻宝一样沿着家族树向上找直到找到宝物或者到达家族树的顶端null现在当有人提到原型链时你可以微笑着说“哦就是JavaScript对象的家族传家宝系统嘛”希望这个比喻让你对原型链有了更直观的理解。下次写JavaScript时不妨想想你正在处理的对象的家族关系吧记住在JavaScript的世界里每个对象都不是孤岛它们通过原型链连接成一个庞大的家族网络