在JavaScript中,原型是一种实现对象继承的核心机制。本文将全面讲解JavaScript中的原型概念,帮助你理解其工作原理和应用场景。 首先,我们需要了解JavaScript中的两个基础概念:`Object`和`Function`。它们都是JavaScript内置的函数,同时也是对象。`Object`继承自自身,`Function`同样继承自自身,而且`Object`和`Function`互相继承。这意味着`Function`是`Object`的一个实例,反之亦然。这可以通过`instanceof`操作符进行验证: ```javascript console.log(Function instanceof Object); // true console.log(Object instanceof Function); // true ``` 此外,`Function.prototype`是一个函数对象,而`Object.prototype`则是一个普通的对象。这两个原型对象在JavaScript的继承链中扮演着重要角色。 在JavaScript中,对象可以分为两类:函数对象和普通对象。函数对象可以通过`new Function()`创建,而普通对象通常通过`new Object()`或直接使用大括号`{}`创建。我们可以通过`typeof`操作符来区分它们: ```javascript function f1() {} typeof f1; // "function" var o1 = new f1(); typeof o1; // "object" var o2 = {}; typeof o2; // "object" ``` 接下来,我们讨论`prototype`、`__proto__`和`constructor`这三个关键属性。 1. 每个函数对象都有一个`prototype`属性,用于定义该函数作为构造函数时,新创建的对象将继承的属性和方法。`prototype`下面有一个`constructor`属性,它指向创建该原型对象的函数。 2. 每个对象都有一个内部属性`__proto__`,它链接到对象的构造函数的`prototype`。这构成了所谓的原型链,用于查找对象的属性和方法。 例如: ```javascript var o = {}; console.log(o.prototype); // undefined console.log(o instanceof Object); // true console.log(o.__proto__ === Object.prototype); // true console.log(Object === Object.prototype.constructor); // true console.log(Object.prototype.constructor); // function Object() console.log(Object.prototype.__proto__); // null ``` 对于函数对象,情况类似,但还涉及到`prototype`的`__proto__`属性: ```javascript function Demo() {} var f1 = new Demo(); console.log(f1.prototype); // undefined console.log(f1 instanceof Demo); // true console.log(f1.__proto__ === Demo.prototype); // true console.log(Demo === Demo.prototype.constructor); // true console.log(Demo.prototype.__proto__ === Object.prototype); // true console.log(Object.prototype.__proto__); // null ``` `Demo.prototype`的`__proto__`指向`Object.prototype`,因为`Demo`是一个函数对象,它的原型继承自`Object`。`Object.prototype.__proto__`为`null`,表示原型链的顶端。 通过这些概念,我们可以创建自定义的构造函数,并利用原型链实现继承。例如,创建一个子类并继承父类的方法: ```javascript function Animal(name) { this.name = name; } Animal.prototype.sayName = function() { console.log(this.name); } function Dog(name) { Animal.call(this, name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.constructor = Dog; var myDog = new Dog("Fido"); myDog.sayName(); // 输出 "Fido" ``` 在这个例子中,`Dog`继承了`Animal`的`sayName`方法,这是因为`Dog.prototype`链接到了`Animal.prototype`,形成了原型链。 总结一下,JavaScript中的原型是实现继承的关键机制,它通过`prototype`、`__proto__`和`constructor`属性构建了对象之间的关系。理解这些概念对于深入学习JavaScript的面向对象编程至关重要。通过创建和继承原型,我们可以构建复杂的数据结构和功能丰富的应用程序。
![png](https://img-home.csdnimg.cn/images/20210720083516.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)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/release/download_crawler_static/12963464/bg1.jpg)
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 9
- 资源: 916
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的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)