js原型与原型链理解丨技术开发分享录

js原型与原型链理解

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"原型可以说是JS的特色,要知道在JS中一切皆是对象(虽然有点夸张,但也差不多),对象的属性、方法调用都有一条隐形的控制链在作用,其实理解原型也不难,这里直接使用内置的方法演示\n\n```\nvar date = new Date();\nconsole.log(date.getHours()); // 获取小时\n```\n\n上面Date是构造函数,通过new关键字去实例化\n\n在JS中每个方法都有prototype属性\n\n![pt1.jpg](/images/articles/pt120200717105851.jpg)\n\n每个实例也都有\\__proto__属性\n\n![pt2.jpg](/images/articles/pt220200717105935.jpg)\n\n```\nconsole.log(date.__proto__ === Date.prototype); // true\n```\n\n从上面可以看出构造函数的原型等于实例的原型。\n\n另外Date方法与原型的构造函数也是相等的\n\n```\nconsole.log(Date === Date.prototype.constructor); // true\n```\n\n![pt3.jpg](/images/articles/pt320200717110642.jpg)\n\n那么原型链的最终根是什么呢?一张图了解一下\n\n![pt4.jpg](/images/articles/pt420200717110752.jpg)\n\n很直观的可以看出,实例的最终原型是Object.prototype,而Object.prototype.\\__proto__为null,所以原型的终止是null空对象\n\n**原型链的属性方法的使用规则**:优先使用对象本身的属性或方法,如果本身没有则再向父级原型查找,直到Object.prototye,因为到null已经没意义了\n\n示例1:本身没有,向上从父级原型查找\n\n```\nfunction Foo() {}\nFoo.prototype.say = function() {\n    console.log('prototype foo');\n}\nvar foo = new Foo();\nfoo.say(); // prototype foo\n```\n\n示例2:本身没有,父级没有,向顶级Object原型查找\n\n```\nfunction Foo() {}\nObject.prototype.say = function() {\n    console.log('Object say');\n}\nvar foo = new Foo();\nfoo.say(); // Object say\n```\n\n示例3:本身和父级都有,优先使用本身\n\n```\nfunction Foo() {\n    this.say = function() {\n        console.log('foo');\n    }\n}\n\nFoo.prototype.say = function() {\n    console.log('prototype foo');\n}\nvar foo = new Foo();\nfoo.say(); // foo\n```"
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看