基于js中的原型(全面讲解)

在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的面向对象编程至关重要。通过创建和继承原型，我们可以构建复杂的数据结构和功能丰富的应用程序。