Comments (1)
这个问题关键在于两个点,一个是原型对象
是什么,另一个是原型链
是如何形成的。
什么是原型对象
绝大部分的函数(少数内建函数除外)都有一个prototype
属性,这个属性是原型对象用来创建新对象实例,而所有被创建的对象都会共享原型对象,因此这些对象便可以访问原型对象的属性。
例如hasOwnProperty()
方法存在于Obejct原型对象中,它便可以被任何对象当做自己的方法使用.
用法:
object.hasOwnProperty( propertyName )
hasOwnProperty()
函数的返回值为Boolean
类型。如果对象object
具有名称为propertyName
的属性,则返回true
,否则返回false
。
var person = {
name: "Messi",
age: 29,
profession: "football player"
};
console.log(person.hasOwnProperty("name")); //true
console.log(person.hasOwnProperty("hasOwnProperty")); //false
console.log(Object.prototype.hasOwnProperty("hasOwnProperty")); //true
由以上代码可知,hasOwnProperty()
并不存在于person
对象中,但是person
依然可以拥有此方法.
所以person
对象是如何找到Object
对象中的方法的呢?靠的是原型链。
原型链的形成
原因是每个对象都有 __proto__
属性,此属性指向该对象的构造函数的原型。
对象可以通过 __proto__
与上游的构造函数的原型对象连接起来,而上游的原型对象也有一个__proto__
,这样就形成了原型链。
function Person() {}
function Student() {}
Student.prototype = new Person();
const person = new Person();
const student = new Student();
console.log(person);
console.log(person.__proto__);
console.log(student.__proto__);
console.log(person.__proto__ === Person.prototype) // true
console.log(person.__proto__.__proto__ === Object.prototype) // true
console.log(student);
console.log(student.__proto__ === Student.prototype) // true
console.log(student.__proto__.__proto__ === Person.prototype) // true
console.log(student.__proto__.__proto__.__proto__ === Object.prototype) // true
tips: __proto__是实现原型链的关键,而prototype则是原型链的组成
经典原型链图
from fe-interview.
Related Issues (20)
- nuxt有哪些特性?为什么要用nuxt做服务端渲染?它解决了什么问题? HOT 1
- CSS Sprites(雪碧图)原理及其优缺点 HOT 1
- 图片懒加载原理及如何实现 HOT 1
- JS获取url参数的方法 HOT 1
- 手写实现一个合乎规范的Promise HOT 1
- requestAnimationFrame原理及兼容性封装 HOT 1
- 用过HappyPack吗?HappyPack有什么优点? HOT 2
- eslint忽略全局变量的方法 HOT 1
- webpack配置路径别名 HOT 1
- webpack添加路径别名后,vscode不能智能提示,如何解决? HOT 1
- 如何只用两行代码实现判断js中所有数据类型 HOT 1
- nrm和nvm HOT 1
- 不用window.open打开新窗口 HOT 1
- js变量提升 HOT 1
- js中精度问题及解决方案 HOT 2
- webpack之less-loader、css-loader、style-loader执行顺序 HOT 1
- js实现普通数组去重&json数组去重 HOT 1
- 常见的js模板引擎
- js原生实现拷贝到剪贴板 HOT 1
- iframe内嵌网页未知高度如何自适应 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fe-interview.