详解js中的原型,原型对象,原型链
![preview](https://dl-preview.csdnimg.cn/12925090/0001-3895c4b0e3bcdc96ff1625fc945abb08_thumbnail.jpeg)
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
在JavaScript中,原型、原型对象和原型链是理解面向对象编程的关键概念。下面将深入解析这三个概念,并通过实例展示它们的工作原理。 首先,**原型**是JavaScript中的一个核心概念,它允许对象之间共享属性和方法。当我们创建一个函数时,这个函数会自动获得一个`prototype`属性,该属性是一个对象,包含了所有实例可以共享的属性和方法。例如: ```javascript function Person() {} Person.prototype.name = 'ccc'; Person.prototype.age = 18; Person.prototype.sayName = function() { console.log(this.name); }; ``` 在这个例子中,`Person.prototype`就是一个原型对象,它包含了`name`、`age`和`sayName`这三个属性或方法。 **原型对象**是通过构造函数的`prototype`属性引用的。每个函数的原型对象都有一个`constructor`属性,它指向了创建该原型的函数。在上面的例子中,`Person.prototype.constructor`就是`Person`函数自身。 值得注意的是,每个通过构造函数创建的实例,如`person1`和`person2`,都有一个内部属性`[[prototype]]`,在非标准实现中可以通过`__proto__`访问。这个属性指向上述构造函数的原型对象,即`Person.prototype`。这意味着实例可以访问到原型对象上的属性和方法。 例如: ```javascript console.log(person1.__proto__ === Person.prototype); // --> true ``` 为了检查一个对象是否是另一个对象的原型,我们可以使用`isPrototypeOf()`方法或`Object.getPrototypeOf()`。例如: ```javascript console.log(Person.prototype.isPrototypeOf(person1)); // --> true console.log(Object.getPrototypeOf(person1) === Person.prototype); // --> true ``` **原型链**是由这些内部`[[prototype]]`(或`__proto__`)指针连接起来的一系列原型对象形成的链。当尝试访问实例的一个属性时,JavaScript会首先查找实例本身,如果没有找到,则沿着原型链向上查找,直到找到该属性或到达原型链的顶端(通常是`null`)。 关于**实例属性与原型属性的关系**,如果实例和原型有同名属性,实例的属性会优先于原型的属性被访问。例如: ```javascript person1.name = 'www'; // 在person1中添加一个name属性 person1.sayName(); // --> 'www' —— 来自实例 person2.sayName(); // --> 'ccc' —— 来自原型 ``` 这里,`person1`的`name`属性覆盖了原型上的`name`属性。如果我们删除实例上的属性,就会再次从原型中获取该属性: ```javascript delete person1.name; person1.sayName(); // --> 'ccc' —— 来自原型 ``` `hasOwnProperty()`方法可以帮助我们区分属性是属于实例还是原型: ```javascript console.log(person1.hasOwnProperty('name')); // --> true console.log(person2.hasOwnProperty('name')); // --> false ``` 总的来说,JavaScript的原型机制提供了一种高效的方式来共享和继承对象的属性和方法。通过理解原型、原型对象和原型链,开发者可以更好地利用JavaScript的面向对象特性进行编程。在实际开发中,这些概念不仅在创建可复用的代码和构建复杂的应用时起到关键作用,同时也是深入理解JavaScript工作原理的基础。
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![xmind](https://img-home.csdnimg.cn/images/20210720083646.png)
![png](https://img-home.csdnimg.cn/images/20210720083516.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 2
- 资源: 921
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)