11-原型对象
我们在学习构造函数那一节的时候遇到了一个问题。
1 <script type="text/javascript"> 2 function Person(age, name, sex){ 3 this.name = name; 4 this.sex = sex; 5 this.age = age; 6 this.sayName = SayName; 7 } 8 function SayName(){ 9 alert("大家好!" + "我是" + this.name + ",我" + this.age + "岁," + "我是" + this.sex + "生"); 10 } 11 12 p1 = new Person(18, "沙僧", "男"); 13 p2 = new Person(18, "孙悟空", "男"); 14 p3 = new Person(18, "白骨精", "女"); 15 p1.sayName(); 16 p2.sayName(); 17 p3.sayName(); 18 </script>View Code
大家看这个,咱们可以发现虽然可以达到创建多个对象,只调用一次函数的效果,但是也有许多弊端。
将函数定义在全局作用域,污染全局作用域的命名空间,而且定义在全局作用域中也很不安全。因为一个程序一般都是多个人参与开发的,另外一个开发人员可能会用到和你一样的函数名,这样就会污染变量。
下面就为大家介绍另外一种方法:原型对象法
首先为大家解释什么是原型对象?
在每一个构造函数对象中都有一个隐藏的属性prototype,而这个属性是一个对象,我们把这个对象称作原型对象。
大家可以看下面这段代码:
1 function Dog(){ 2 console.log("一只小狗"); 3 } 4 console.log(Dog.prototype);
这段代码运行效果如下:
既然prototype是一个对象那他就可以拥有自己的属性和方法,大家可以看下面这张图:
另外,这个属性在同一个构造函数中创建的对象中是一样的:
1 function Dog(){ 2 console.log("一只小狗"); 3 } 4 // console.log(Dog.prototype); 5 d1 = new Dog(); 6 d2 = new Dog(); 7 console.log(d1.__proto__ === d2.__proto__); 8 console.log(d1.__proto__ === Dog.prototype);
这段代码运行效果如下:
基于以上特性我们可以将需要在构造函数中使用的属性、方法,全部放到原型属性里面:
(原型对象就像是一个公共的区域,所有同一类的实例都可以访问到这个原型对象。)
1 function Person(name, age, sex){ 2 this.name = name; 3 this.age = age; 4 this.sex = sex; 5 } 6 Person.prototype.sayName = function(){ 7 console.log(`大家好,我是${this.name},我是${this.sex}生,我${this.age}岁`); 8 } 9 obj1 = new Person("孙悟空", 10000, "男"); 10 obj1.sayName();
下图是上面代码执行效果:
在JS中当我们访问对象的一个属性或者方法时,他会现在对象自身中寻找,如果有则直接使用,如果没有就向原型对象中找。
另外原型对象也是一个对象,是一个对象就有原型对象,那么是不是没有尽头呢?我们来看下面的代码:
1 console.log(d1.__proto__); 2 console.log(d1.__proto__.__proto__); 3 console.log(d1.__proto__.__proto__.__proto__); // 返回空
下图是代码执行效果:
通过上面代码我们发现并不是所有对象都有原型对象,那么哪一类对象没有原型对象呢?
Object对象没有原型对象,如果在Object中依然没有找到,则返回null或undefined