深入了解js原型模式


Posted in Javascript onMay 30, 2019

一、什么是原型模式

在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: '张三',
};

但是通过这种方式会导致对象的[[Enumerable]]特性被设置为ture,默认情况下,constructor属性时不可枚举的,可以通过Object.defineProperty()解决这个问题。

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

4.原型的动态性

当对原型对象所做的任何修改都能够立即从实例上反应出来。

function Person() {};
var friend = new Person();
Person.prototype.sayHi = function() {
console.log('hi');
};
friend.sayHi(); // hi

但是如果是重写整个原型对象,那么情况就不一样了。调用构造函数时会为实例添加一个指向最初原型的[[prototype]]指针,而把原型修改为另外一个对象 就相当于切断了构造函数与最初原型之间的联系。 实例中的指针仅指向原型,而不是指向构造函数。

// 构造函数
function Person() {};
var friend = new Person();
Person.prototype = {
constructor: Person,
sayHi: function() {
console.log(hi);
}
};
friend.sayHi(); // Uncaught TypeError: friend.sayHi is not a function

创建了一个Person的实例,然后又重写了其原型对象。但是在使用sayHi()时发生了错误,这个时候实例所指向的原型对象是一个新的对象。重写原型对象切断了现有原型与之前已经存在的对象实例直接的联系。所以报错了。

5.原生对象的原型

原型模式的重要性不仅体现在创建自定义类型方面,就连所有原生的引用类型,都采用这种模式,所有的原生引用类型(Object、Array、String)等,都在其构造函数的原型上定义了方法。可以像修改自定义对象的原型一样修改原生对象的原型。

二、原型模式的缺点

对于包含引用类型值的属性来说,所有实例在默认的情况下都会取得相同的属性值。

// 构造函数
function Person() {};
// 原型属性prototype
Person.prototype = {
constructor: Person,
friends: ['张三', '李四'],
}
let person1 = new Person();
let person2 = new Person();
person1.friends.push('王五');
console.log(person1.friends); // ["张三", "李四", "王五"]
console.log(person2.friends); // ["张三", "李四", "王五"]

由于friends存在于Person的原型对象中,所以person1对friends的修改也会通过person2反应出来,但是实例对象一般都是要有属于自己的全部属性,正因为如此,很少有人单独使用原型模式来创建对象。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
js逆向解密之网络爬虫
May 30 #Javascript
Vue.js中的组件系统
May 30 #Javascript
Vue+Django项目部署详解
May 30 #Javascript
了解重排与重绘
May 29 #Javascript
小程序如何构建骨架屏
May 29 #Javascript
新手简单了解vue
May 29 #Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 #Javascript
You might like
PHP 使用redis简单示例分享
2015/03/05 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
jquery分页对象使用示例
2014/04/01 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
深入理解ES6的迭代器与生成器
2017/08/19 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
vue拖拽组件使用方法详解
2018/12/01 Javascript
傻瓜式vuex语法糖kiss-vuex整理
2018/12/21 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python异常处理操作实例详解
2018/08/28 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python实现上下文管理器的方法
2020/08/07 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
音乐专业应届生教师求职信
2013/11/04 职场文书
项目管理计划书
2014/01/09 职场文书
京剧自荐信
2014/01/26 职场文书
八项规定对照检查材料
2014/08/31 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android