网站主关键词,qq是谁开发出来的软件?,e想时代官方网站,自助建站公司JS的原型、原型链一直是比较难理解的内容#xff0c;不少初学者甚至有一定经验的老鸟都不一定能完全说清楚#xff0c;更多的很可能是一知半解#xff0c;而这部分内容又是JS的核心内容#xff0c;想要技术进阶的话肯定不能对这个概念一知半解#xff0c;碰到… JS的原型、原型链一直是比较难理解的内容不少初学者甚至有一定经验的老鸟都不一定能完全说清楚更多的很可能是一知半解而这部分内容又是JS的核心内容想要技术进阶的话肯定不能对这个概念一知半解碰到问题靠“猜”却不理解它的规则prototype只有函数有prototype属性let a {}let b function () { }console.log(a.prototype) // undefinedconsole.log(b.prototype) // { constructor: function(){...} }Object.prototype怎么解释其实 Object是一个全局对象也是一个构造函数以及其他基本类型的全局对象也都是构造函数function outTypeName(data, type) { let typeName Object.prototype.toString.call(data) console.log(typeName)}outTypeName(Object) //[object Function]outTypeName(String) // [object Function]outTypeName(Number) // [object Function]为什么只有函数有prototype属性JS通过 new来生成对象但是仅靠构造函数每次生成的对象都不一样。有时候需要在两个对象之间共享属性由于JS在设计之初没有类的概念所以JS使用函数的 prototype来处理这部分需要被共享的属性通过函数的 prototype来模拟类当创建一个函数时JS会自动为函数添加 prototype属性值是一个有 constructor的对象。以下是共享属性 prototype的栗子function People(name) { this.name name}People.prototype.age 23 // 岁数// 创建两个实例let People1 new People(OBKoro1)let People2 new People(扣肉)People.prototype.age 24 // 长大了一岁console.log(People1.age, People2.age) // 24 24为什么 People1和 People2可以访问到 People.prototype.age原因是People1和 People2的原型是 People.prototype答案在下方的构造函数是什么以及它做了什么。原型链__proto__和 Object.getPrototypeOf(target)对象的原型__proto__是对象实例和它的构造函数之间建立的链接它的值是构造函数的prototype。也就是说__proto__的值是它所对应的原型对象是某个函数的 prototypeObject.getPrototypeOf(target)全等于 __proto__。它是ES6的标准兼容IE9主流浏览器也都支持MDN本文将以 Object.getPrototypeOf(target)指代 __proto__。不要再使用 __proto__:本段摘自阮一峰-ES6入门具体解析请点击链接查看 1. __proto__属性没有写入 ES6 的正文而是写入了附录。 2. 原因是它本质上是一个内部属性而不是一个正式的对外的 API只是由于浏览器广泛支持才被加入了 ES6。 3. 标准明确规定只有浏览器必须部署这个属性其他运行环境不一定需要部署而且新的代码最好认为这个属性是不存在的。 4. 所以无论从语义的角度还是从兼容性的角度都不要使用这个属性应该使用Object.getPrototypeOf(target)(读操作)、 Object.setPrototypeOf(target)(写操作)、 Object.create(target)(生成操作)代替构造函数是什么、它做了什么出自《你不知道的在js》在js中, 实际上并不存在所谓的构造函数只有对于函数的构造调用。上文一直提到构造函数所谓的构造函数实际上就是通过关键字 new来调用的函数let newObj new someFn() // 构造调用函数构造/new调用函数的时候做了什么创建一个全新的对象。这个新对象的原型( Object.getPrototypeOf(target))指向构造函数的 prototype对象。该函数的this会绑定在新创建的对象上。如果函数没有返回其他对象那么new表达式中的函数调用会自动返回这个新对象。我们称这个新对象为构造函数的实例。原型继承就是利用构造调用函数的特性SubType.prototype new SuperType(); // 原型继承SubType继承SuperType// 挂载SuperType的this和prototype的属性和方法到SubType.prototype上构造调用的第二点将新对象的 Object.getPrototypeOf(target)指向函数的 prototype构造调用的第三点该函数的this会绑定在新创建的对象上。新对象赋值给 SubType.prototype原型类型还有缺点多个实例对引用类型的操作会被篡改这里就不扩展了。原型链是什么来看个例子function foo() { }const newObj new foo() // 构造调用foo 返回一个新对象const newObj__proto__ Object.getPrototypeOf(newObj) // 获取newObj的原型对象newObj__proto__ foo.prototype // true 验证newObj的原型指向fooconst foo__proto__ Object.getPrototypeOf(foo.prototype) // 获取foo.prototype的原型foo__proto__ Object.prototype // true foo.prototype的原型是Object.prototype如果用以前的语法从 newObj查找 foo的原型是这样的newObj.__proto__.__proto__ // 这种关系就是原型链可以用以下三句话来理解原型链每个对象都拥有一个原型对象: newObj的原型是 foo.prototype。对象的原型可能也是继承其他原型对象的: foo.prototype也有它的原型 Object.prototype。一层一层的以此类推这种关系就是原型链。一个对象是否在另一个对象的原型链上如果一个对象存在另一个对象的原型链上我们可以说它们是继承关系。判断方式有两种但都是根据构造函数的 prototype是否在原型链上来判断的 1. instanceof: 用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置语法objectinstanceofconstructorlet test function () { }let testObject new test();testObject instanceof test // true test.prototype在testObject的原型链上 testObject instanceof Function // false Function.prototype 不在testObject的原型链上testObject instanceof Object // true Object.prototype在testObject的原型链上 2. isPrototypeOf测试一个对象是否存在于另一个对象的原型链上语法prototypeObj.isPrototypeOf(object)let test function () { }let testObject new test();test.prototype.isPrototypeOf(testObject) // true test.prototype在testObject的原型链上Object.prototype.isPrototypeOf(testObject) // true Object.prototype在testObject的原型链上原型链的终点: Object.prototypeObject.prototype是原型链的终点所有对象都是从它继承了方法和属性。Object.prototype没有原型对象const proto Object.getPrototypeOf(Object.prototype) // null下面是两个验证例子有疑虑的同学多写几个测试用例印证一下。字符串原型链的终点Object.prototypelet test 由String函数构造出来的let stringPrototype Object.getPrototypeOf(test) // 字符串的原型stringPrototype String.prototype // true 字符串的原型是String对象Object.getPrototypeOf(stringPrototype) Object.prototype // true String对象的原型是Object对象函数原型链的终点: Object.prototypelet test function () { }let fnPrototype Object.getPrototypeOf(test)stringPrototype Function.prototype // true test的原型是Function.prototypeObject.getPrototypeOf(Function.prototype) Object.prototype // true原型链用来做什么属性查找如果试图访问对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性以此类推我们用一个例子来形象说明一下let test 由String函数构造出来的let stringPrototype Object.getPrototypeOf(test) // 字符串的原型stringPrototype String.prototype // true 字符串的原型是String对象Object.getPrototypeOf(stringPrototype) Object.prototype // true String对象的原型是Object对象当你访问 test的某个属性时浏览器会进行以下查找浏览器首先查找 test 本身接着查找它的原型对象 String.prototype最后查找 String.prototype的原型对象 Object.prototype一旦在原型链上找到该属性就会立即返回该属性停止查找。原型链上的原型都没有找到的话返回 undefiend这种查找机制还解释了字符串为何会有自带的方法: slice/ split/ indexOf等。准确的说这些属性和方法是定义在 String这个全局对象/函数上的。字符串的原型指向了 String函数的 prototype。之后通过查找原型链在String函数的 prototype中找到这些属性和方法。拒绝查找原型链hasOwnProperty: 指示对象自身属性中是否具有指定的属性语法obj.hasOwnProperty(prop)参数: prop 要查找的属性返回值: 用来判断某个对象是否含有指定的属性的 Boolean。let test { OBKoro1: 扣肉 }test.hasOwnProperty(OBKoro1); // truetest.hasOwnProperty(toString); // false test本身没查找到toString这个 API是挂载在 object.prototype上所有对象都可以使用API会忽略掉那些从原型链上继承到的属性。扩展实例的属性你知道构造函数的实例对象上有哪些属性吗这些属性分别挂载在哪个地方原因是什么function foo() { this.some 222 let ccc ccc foo.obkoro1 obkoro1 foo.prototype.a aaa}foo.koro 扣肉foo.prototype.test testlet foo1 new foo() // foo1上有哪些属性,这些属性分别挂载在哪个地方foo.prototype.test test2 // 重新赋值上面这道是考察 JS基础的题很多人都没说对原因是没有彻底掌握 this、 原型链、 函数。想一下再看解析想一下再看解析想一下再看解析想一下再看解析想一下再看解析 1. this.some foo1对象的属性通过构造调用 foo的 this指向 foo1所以 this.some挂载在 foo1对象下。属性查找: foo1.somefoo1.some直接读取 foo1的属性。 2. foo1.test、 foo1.a foo1对象的原型根据上文提到的构造/new调用函数的时候会创建一个新对象( foo1)自动将 foo1的原型( Object.getPrototypeOf(foo1))指向构造函数的prototype对象。构造调用会执行函数所以 foo.prototype.aaaaaa也会执行单就赋值这个层面来说写在 foo外面和写在 foo里面是一样的。属性查找foo1.test、 foo1.afoo1本身没有找到,继续查找foo1的原型 Object.getPrototypeOf(foo1)上找到了 a和 test返回它们停止查找。 3. foo1.obkoro1和 foo1.koro返回undefined静态属性: foo.obkoro1、 foo.koro函数在JS中是一等公民它也是一个对象, 用来模拟类。这两个属性跟 foo1没有关系它是对象 foo上的两个属性(类似函数的: arguments/ prototype/ length等属性)称为静态属性。它们只能通过 foo.obkoro1和 foo.koro来访问。原型对象改变原型链下游获取的值也会改变上面那个例子中的 foo1.test的值是什么foo.prototype.test testlet foo1 new foo() // foo1上有哪些属性,这些属性分别挂载在哪个地方foo.prototype.test test2 // 重新赋值foo1.test的值是 test2原因是foo1的原型对象是 Object.getPrototypeOf(foo1)存的指针指向 foo.prototype的内存地址不是拷贝每次读取的值都是当前 foo.prototype的最新值。打印 foo1小结写了好几天之前网上很多图文博客那些线指来指去就我个人看来还是比较难以理解的所以本文纯文字的形式来描述这些概念相信认真看完的同学肯定都有所收获如果没看懂的话建议多看几遍这部分概念真的很重要
