深入了解js原型模式

一、什么是原型模式

在js中,创建对象的方式有工厂模式和构造函数模式等; 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,所以为了解决这一个问题,就需要使用原型模式来创建对象。
原型模式是把所有实例共享的方法和属性放在一个叫做prototype(原型)的属性中 ,在创建一个函数时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象。

// 构造函数 function Person() {}; // 原型属性prototype Person.prototype.name = '张三'; Person.prototype.sayName = function() { console.log(this.name); }; let person1 = new Person(); person1.sayName(); //张三 let person2 = new Person(); person2.sayName(); // 张三 console.log(person1.sayName == person2.sayName); //true

1.理解原型对象

无论什么时候,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象,在默认的情况下,所有的原型对象都自动获得一个constructor(构造函数)属性,这是一个指针,指向prototype属性所在的函数。创建了自定义的构造函数之后,其原型对象默认只会取得constructor属性;其他的方法则是从Object继承来的。

当调用构造函数创建一个新实例对象后,该实例的内部将包含一个指针[[Prototype]],指向构造函数的原型对象。这个连接存在于实例和构造函数的原型对象之间,而不是存在实例和构造函数之间。

每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了就返回该属性的值,没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性,如果在原型对象中找到了这个属性,就返回该属性的值。

虽然可以通过实例访问保存在原型中的值,但不能通过实例对象重写原型中的值,如果在实例中添加一个在原型中的同名属性,该属性会自动屏蔽原型中的属性,但是不会修改原型中的属性,只会阻止访问原型中的属性,通过delete操作符则可以完全删除实例属性,使得可以重新访问原型中的属性。

2.原型与in操作符

hasOwnProperty()方法可以检测一个属性是否存在于实例对象中,

// 构造函数 function Person() { this.age = 16; }; Person.prototype.name = "张三"; let person1 = new Person(); console.log(person1.hasOwnProperty('name')); // false console.log(person1.hasOwnProperty('age')); // true

in操作符的使用可以分为两类,单独使用和在for-in循环使用,在单独使用时,in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。

// 构造函数 function Person() {} Person.prototype.name = 'zhang'; let person1 = new Person(); console.log('name' in person1); // true person1.age = 14; console.log('age' in person1); // true

同时使用hasOwnProperty()方法和in操作符,可以确定该属性时在原型上还是在存在于对象中。

// 构造函数 function Person() {} function hasPrototypeProperty(object, name) { return !object.hasOwnProperty(name) && (name in object); } Person.prototype.name = "张三"; let person = new Person(); console.log(hasPrototypeProperty(person, 'name')); // true console.log(hasPrototypeProperty(person, 'age')); // false

使用for-in循环时,返回的是所有能够通过对象访问的、可枚举的属性,其中即包含存在于实例中的属性,也包含与存在原型中的属性。

let o = { name: 'san', age: 14, }; for(let key in o) { console.log(key); }

要取得对象上所有可枚举的实例属性,可以使用Object.keys()方法,接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组。

如果想得到所有实例属性。无论是否可枚举,都可以使用Object.getOwnPropertyNames()方法。

3.更简单的原型语法

为了减少不必要的输入和从视觉上更好的封装原型的功能,常见的做法是用一个包含所有属性和方法的对象字面量来重写整个原型对象。

// 构造函数 function Person() {}; Person.prototype = { sayHi: function() { console.log(hi); }, name: '张三', };

通过这个方式会导致原型对象中的constructor属性不在指向Person了。如果constructor的值真的很重要,可以像下面这样特意将它设置回适当的值。

// 构造函数 function Person() {}; Person.prototype = { constructor: Person, sayHi: function() { console.log(hi); }, name: '张三', };

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/69b052e8608e21231547728fac65f0fd.html