JavaScript中原型对象的彻底理解_javascript原型对象的彻底理解做人要厚道-CSDN博客

本文链接：https://blog.csdn.net/2401_85123458/article/details/139626612

看下面的代码：

<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">
下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

![HTML、CSS部分截图](https://img-blog.csdnimg.cn/img_convert/2bb6b442a4432372fe5b9ccea2ad93d0.png)

### 进阶阶段



进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。



我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。



**1、JavaScript 和 ES6**



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://img-blog.csdnimg.cn/img_convert/cac778dc45492a41e2f3e7cd6b0134e5.png)



**2、前端框架**

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。



以 Vue 为例，我整理了如下的面试题。



![Vue部分截图](https://img-blog.csdnimg.cn/img_convert/c6738a80c94640db83f7ffbf487ac5f0.png)