首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

带你彻底理解JavaScript中的原型对象

Posted in Javascript onApril 14, 2021

一、什么是原型

原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。

1.1 函数的原型对象

​ 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

​ 看下面的代码：

<body>
    <script type="text/javascript">
    	/*
    		声明一个函数，则这个函数默认会有一个属性叫 prototype 。而且浏览器会自动按照一定的规则
    		创建一个对象，这个对象就是这个函数的原型对象，prototype属性指向这个原型对象。这个原型对象
    		有一个属性叫constructor 执行了这个函数
			
			注意：原型对象默认只有属性：constructor。其他都是从Object继承而来，暂且不用考虑。
		*/
	    function Person () {
	    	
	    }	    
    </script>
</body>

下面的图描述了声明一个函数之后发生的事情：

带你彻底理解JavaScript中的原型对象

1.2 使用构造函数创建对象

​ 当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。 这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。

​ 看下面的代码：

<body>
    <script type="text/javascript">
	    function Person () {
	    	
	    }	
        /*
        	利用构造函数创建一个对象，则这个对象会自动添加一个不可见的属性 [[prototype]], 而且这个属性
        	指向了构造函数的原型对象。
        */
      	var p1 = new Person();
    </script>
</body>

观察下面的示意图：

带你彻底理解JavaScript中的原型对象

说明:

1.从上面的图示中可以看到，创建p1对象虽然使用的是Person构造函数，但是对象创建出来之后，这个p1对象其实已经与Person构造函数没有任何关系了，p1对象的[[ prototype ]]属性指向的是Person构造函数的原型对象。

2.如果使用new Person()创建多个对象，则多个对象都会同时指向Person构造函数的原型对象。

3.我们可以手动给这个原型对象添加属性和方法，那么p1,p2,p3…这些对象就会共享这些在原型中添加的属性和方法。

4.如果我们访问p1中的一个属性name，如果在p1对象中找到，则直接返回。如果p1对象中没有找到，则直接去p1对象的[[prototype]]属性指向的原型对象中查找，如果查找到则返回。(如果原型中也没有找到，则继续向上找原型的原型—原型链。 后面再讲)。

5.如果通过p1对象添加了一个属性name，则p1对象来说就屏蔽了原型中的属性name。 换句话说：在p1中就没有办法访问到原型的属性name了。

6.通过p1对象只能读取原型中的属性name的值，而不能修改原型中的属性name的值。 p1.name = “李四”; 并不是修改了原型中的值，而是在p1对象中给添加了一个属性name。

看下面的代码：

<body>
    <script type="text/javascript">
	    function Person () {    	
	    }
      	// 可以使用Person.prototype 直接访问到原型对象
	    //给Person函数的原型对象中添加一个属性 name并且值是 "张三"
	    Person.prototype.name = "张三";
	    Person.prototype.age = 20;

	   	var p1 = new Person();
	   	/*
	   		访问p1对象的属性name，虽然在p1对象中我们并没有明确的添加属性name，但是
	   		p1的 [[prototype]] 属性指向的原型中有name属性，所以这个地方可以访问到属性name
	   		就值。
	   		注意：这个时候不能通过p1对象删除name属性，因为只能删除在p1中删除的对象。
	   	*/
	   	alert(p1.name);  // 张三

	   	var p2 = new Person();
	   	alert(p2.name);  // 张三  都是从原型中找到的，所以一样。

	   	alert(p1.name === p2.name);  // true

	   	// 由于不能修改原型中的值，则这种方法就直接在p1中添加了一个新的属性name，然后在p1中无法再访问到
	   	//原型中的属性。
	   	p1.name = "李四";
	   	alert("p1：" + p1.name);
	   	// 由于p2中没有name属性，则对p2来说仍然是访问的原型中的属性。	
	   	alert("p2:" + p2.name);  // 张三  
    </script>
</body>

带你彻底理解JavaScript中的原型对象

二、与原型有关的几个属性和方法

2.1 prototype属性

​ prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

​ 参考前面的示意图。

2.2 constructor属性

​ constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

<script type="text/javascript">
	function Person () {
	}
	alert(Person.prototype.constructor === Person);	// true
	var p1 = new Person();
  	//使用instanceof 操作符可以判断一个对象的类型。  
  	//typeof一般用来获取简单类型和函数。而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
	alert(p1 instanceof Person);	// true
</script>

我们根据需要，可以Person.prototype 属性指定新的对象，来作为Person的原型对象。

但是这个时候有个问题，新的对象的constructor属性则不再指向Person构造函数了。

看下面的代码：

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		name:"志玲",
		age:20
	};
	var p1 = new Person();
	alert(p1.name);  // 志玲

	alert(p1 instanceof Person); // true
	alert(Person.prototype.constructor === Person); //false
  	//如果constructor对你很重要，你应该在Person.prototype中添加一行这样的代码：
  	/*
  	Person.prototype = {
      	constructor : Person	//让constructor重新指向Person函数
  	}
  	*/
</script>

2.3 __proto__ 属性(注意：左右各是2个下划线)

​ 用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

​ 但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.__proto__

​ 但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

<script type="text/javascript">
	function Person () {
		
	}
	//直接给Person的原型指定对象字面量。则这个对象的constructor属性不再指向Person函数
	Person.prototype = {
		constructor : Person,
		name:"志玲",
		age:20
	};
	var p1 = new Person();

	alert(p1.__proto__ === Person.prototype);	//true
	
</script>

2.4 hasOwnProperty() 方法

​ 大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

​ 那么如何判断这个对象的来源呢？

​ hasOwnProperty方法，可以判断一个属性是否来自对象本身。

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
  	//sex属性是直接在p1属性中添加，所以是true
	alert("sex属性是对象本身的：" + p1.hasOwnProperty("sex"));
  	// name属性是在原型中添加的，所以是false
	alert("name属性是对象本身的：" + p1.hasOwnProperty("name"));
  	//  age 属性不存在，所以也是false
	alert("age属性是存在于对象本身：" + p1.hasOwnProperty("age"));
	
</script>

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

​ in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

<script type="text/javascript">
	function Person () {
		
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
	alert("sex" in p1);		// 对象本身添加的，所以true
	alert("name" in p1);	//原型中存在，所以true
	alert("age" in p1); 	//对象和原型中都不存在，所以false
	
</script>

回到前面的问题，如果判断一个属性是否存在于原型中：

如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

<script type="text/javascript">
	function Person () {
	}
	Person.prototype.name = "志玲";
	var p1 = new Person();
	p1.sex = "女";
	
	//定义一个函数去判断原型所在的位置
	function propertyLocation(obj, prop){
		if(!(prop in obj)){
			alert(prop + "属性不存在");
		}else if(obj.hasOwnProperty(prop)){
			alert(prop + "属性存在于对象中");
		}else {
			alert(prop + "对象存在于原型中");
		}
	}
	propertyLocation(p1, "age");
	propertyLocation(p1, "name");
	propertyLocation(p1, "sex");
</script

三、组合原型模型和构造函数模型创建对象

3.1 原型模型创建对象的缺陷

​ 原型中的所有的属性都是共享的。也就是说，用同一个构造函数创建的对象去访问原型中的属性的时候，大家都是访问的同一个对象，如果一个对象对原型的属性进行了修改，则会反映到所有的对象上面。

​ 但是在实际使用中，每个对象的属性一般是不同的。张三的姓名是张三，李四的姓名是李四。

​ **但是，这个共享特性对 方法(属性值是函数的属性)又是非常合适的。**所有的对象共享方法是最佳状态。这种特性在c#和Java中是天生存在的。

3.2 构造函数模型创建对象的缺陷

​ 在构造函数中添加的属性和方法，每个对象都有自己独有的一份，大家不会共享。这个特性对属性比较合适，但是对方法又不太合适。因为对所有对象来说，他们的方法应该是一份就够了，没有必要每人一份，造成内存的浪费和性能的低下。

<script type="text/javascript">
	function Person() {
	    this.name = "李四";
	    this.age = 20;
	    this.eat = function() {
	        alert("吃完东西");
	    }
	}
	var p1 = new Person();
	var p2 = new Person();
	//每个对象都会有不同的方法
	alert(p1.eat === p2.eat); //fasle
</script>

可以使用下面的方法解决:

<script type="text/javascript">
	function Person() {
	    this.name = "李四";
	    this.age = 20;
	    this.eat = eat;
	}
  	function eat() {
	    alert("吃完东西");
    }
	var p1 = new Person();
	var p2 = new Person();
	//因为eat属性都是赋值的同一个函数，所以是true
	alert(p1.eat === p2.eat); //true
</script>

但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3.3 使用组合模式解决上述两种缺陷

​ 原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。

<script type="text/javascript">
	//在构造方法内部封装属性
	function Person(name, age) {
	    this.name = name;
	    this.age = age;
	}
	//在原型对象内封装方法
	Person.prototype.eat = function (food) {
		alert(this.name + "爱吃" + food);
	}
	Person.prototype.play = function (playName) {
		alert(this.name + "爱玩" + playName);
	}
    
	var p1 = new Person("李四", 20);
	var p2 = new Person("张三", 30);
	p1.eat("苹果");
	p2.eat("香蕉");
	p1.play("志玲");
	p2.play("凤姐");
</script>

四、动态原型模式创建对象

​ 前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

​ 动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

看下面的代码：

<script type="text/javascript">
	//构造方法内部封装属性
	function Person(name, age) {
		//每个对象都添加自己的属性
	    this.name = name;
	    this.age = age;
	    /*
	    	判断this.eat这个属性是不是function，如果不是function则证明是第一次创建对象，
	    	则把这个funcion添加到原型中。
	    	如果是function，则代表原型中已经有了这个方法，则不需要再添加。
	    	perfect！完美解决了性能和代码的封装问题。
	    */
	    if(typeof this.eat !== "function"){
	    	Person.prototype.eat = function () {
	    		alert(this.name + " 在吃");
	    	}
	    }
	}
	var p1 = new Person("志玲", 40);
	p1.eat();	
</script>

到此这篇关于带你彻底理解JavaScript中的原型对象的文章就介绍到这了,更多相关理解js原型对象内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

带你彻底理解JavaScript中的原型对象

- Author -

做人要厚道2013

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
菜鸟javascript基础整理1
Dec 06 Javascript
JS实现在网页中弹出一个输入框的方法
Mar 03 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
全面解析Bootstrap中scrollspy（滚动监听）的使用方法
Jun 06 Javascript
javascript正则表达式之分组概念与用法实例
Jun 16 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
JS前端使用canvas实现扩展物体类和事件派发
Aug 05 Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
利用前端HTML+CSS+JS开发简单的TODOLIST功能（记事本）
印尼购物网站(37) 台湾购物网站(77) 丹麦购物网站(22) 澳大利亚购物网站(309) 俄罗斯购物网站(137) 马来西亚购物网站(41) 法国购物网站(144) 埃及购物网站(2) 印度购物网站(45) 墨西哥购物网站(16)
You might like
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
PHP树的代码,可以嵌套任意层
2006/10/09 PHP
PHP防盗链代码实例
2014/08/27 PHP
php中print(),print_r(),echo()的区别详解
2014/12/01 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
解密Python中的描述符（descriptor）
2015/06/03 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python多进程间通信代码实例
2019/09/30 Python
python 爬取B站原视频的实例代码
2020/09/09 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
数据库基础的一些面试题
2012/02/25 面试题
大学生先进事迹材料
2014/02/16 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2014超市收银员工作总结
2014/11/13 职场文书
综合素质自我评价评语
2015/03/06 职场文书
2015年纪委工作总结
2015/05/13 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python