面向对象之创建对象方式，原型对象

最新推荐文章于 2024-07-04 00:59:27 发布

咸鱼one

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量126

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45921263/article/details/116675199

版权

文章目录

前言
一、自定义对象
- 1.创建对象方式
二、内存，原型对象和原型链

前言

本篇的主要内容是面向对象，其中自定义对象，原型对象。这两个知识点很重要的。

一、自定义对象

1.创建对象方式

1.内容

a.采用new函数的方式（用的多）
b.采用创建类的方式
c.采用var p = {}

构造器（构造函数）：来初始化一个对象的属性的值的函数。通过new构造器的方式来创建对象
（1）通过function来创建对象
其中，属性和方法又可以分为私有和公有的。
在函数中采用的语法如下：
1. this.属性= 属性值； this.方法名 = function() { //也可以是箭头函数 }

2.let + 私有方法

2.代码如下（示例）

 function Fun(){
			   //创建公有属性和方法
			   this.name = "张无忌"
			   this.age = 20 ;
			   this.show = ()=>{
				   alert(this.name + ":" + this.age + ":" + height) ;
			   }
			   //创建私有属性和方法
			   let  height = this.age + 20;
			   
			   let display = ()=>{
				   alert("我是私有的方法") ;
			   }
			   
			  display() ;
		   }
		   
		   let  f = new Fun() ;
		   let  f1 = new Fun("周芷若"，23)；//构造函数中也可以传参数

在函数外创建公有属性语法：
函数名.protoytpe.属性名 = 属性值；
函数名.prototype。方法名 = function(){}

<script>
function Like(){
};
Like.prototype.color = blue;
Like.prototype.show = function(){
	console.log(this.name);
}
let p = new Like();
console.log(p.color);
p.show();
</script>

2.在函function数外创建私有属性语法：
对象名.私有属性 = 属性值
对象名.私有方法 = function(){}

<script>
	var p = new Person();
	p.name = "李四";
	p.Like = function(){
		console.log(this.name + "粉色");
}
p.Like();//如果被其他的对象调用的话就会出错。
</script>

补充：用标签对象来创建属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		</style>
	</head>
	  
	<body>
		<p id = "p">张三丰</p>
	</body>
</html>
<script>
		let  p = document.getElementById("p")
		
		p.index = 10
		
		alert(p.index) ;
		
</script>

（2）用大括号“{}”来创建对象

 let p2 = {
			 name:'郭靖',
			 age:20,
			 show(){
				 console.log(this)
				 console.log(this.name ,this.age)
			 },
			 display(sex){
				 console.log('此处调用了display方法' + sex)
				 return "erfcgfdg" 
			 }
		 } ;
		 
		 console.log(p2.name,p2.age)
		 p2.show()
		 let s = p2.display('女')
		 console.log(s)

（3）采用class关键字来创建类

	<script>
		  class Person{
			  constructor(name = '张无忌',age=20) {   //构造器
				  console.log("调用了构造函数")
			      this.name = name ;
				  this.age = age ;
				  this.show = () =>{
					console.log(this.name ,this.age) ;
			     }
				 
				 var a1 = 100 ;
			  }
		  }
		  
		  let p = new Person() ;
		  console.log(p.name,p.age)
		  let p1 = new Person("郭靖",22) ;
		  console.log(p1.name,p1.age)
		  p1.show()
		  console.log(p1.a1)
	</script>

二、内存，原型对象和原型链

1.内存

1.概念：

内存的结构：内存分为两块，一块叫栈，一块叫堆，分别用来储存不同的数据，对于变量都储存于栈，对于对象都储存于堆中。

2.结构图:

在这里插入图片描述

图一.内存结构图

代码如下（示例）：

<script>
	
	     
	   let p = {name:'张三'} ;  //p就是一个引用，右边是一个对象，p中存储的就是对象在堆中的地址。
	   
	   let p1 = {age:45} ;
	   
	   console.log(p1.age)
	   
	   p1 = p ;
	  
	   console.log(p1.age)
	   console.log(p1.name)  
	</script>

2.原型对象

1.概念：

无论何时，我们创建的每一个函数都有一个prototye属性，这个属性是一个指针，指向一个对象，这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法，此对象默认是一个空对象。

2.优点：

所有的对象实例都可以共享它包含的属性和方法。

3.结构图：
在这里插入图片描述

图二.原型结构图

prototype是一个属性：显示属性
__proto__是一个属性：隐藏的属性
这两个属性含义相同，都是引用类型的变量，都指向同一个对象

注意：1.任何一个函数（用function创建的函数）都有prototype属性，没有__proto__属性；
2.任何一个对象（除过object对象）都有__proto__属性，没有prototype属性
3.一个类的所有对象的原型对象都是同一个对象

4.代码如下（示例）：

 function Person(){}
	   
	   let p = new Person() ;
	   console.log(Object.prototype) //object
	   console.log(p.__proto__)//object
	   console.log(p.__proto__.__proto__)//object
	   console.log(p.__proto__.__proto__.__proto__)  //结果为null，原型链
	   console.log(Person.prototype)//object
	   console.log(p.__proto__)//object
	   console.log(Person.prototype === p.__proto__) //true
	   
	   Person.prototype.name = "张三丰" ;   //给原型对象添加了一个属性name 
	   p.__proto__.age = 100 ;      // 给原型对象添加了一个属性age 
	   
	   let p1 = new Person() ;
	   
	   console.log(p.name)  //张三丰
	   console.log(p1.age)   //100
	   console.log(p.age)    //100
	   
	   console.log(p.__proto__ === p1.__proto__)  //true

3.原型链

1.概念：

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻对象的原型，以及该对象的原型的原型，依次往上搜索；直到找到一个名字匹配的属性或者到达原型链的末尾。原型链有终点，最后查找到object.prototype时object.prototype__proto__ == null,意味着查找结束。如果没有找到就会返回undefined。

2.代码如下（示例）：


	<script>
	
	   Object.prototype.show = function(){
		   console.log("我是object对象定义的一个方法")
	   }
	   
	   function Person(){}
	   
	   let p = new Person() ;
	   // console.log(typeof(p))
	   // console.log(typeof p)
	   
	   p.show() ;   //js引擎会在p对象的原型链中去寻找show方法
	   
   console.log(p.__proto__.__proto__)
	   console.log( Object.prototype)
	   console.log( Object.prototype ===p.__proto__.__proto__ )
	</script>

咸鱼one

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象之创建对象方式，原型对象

文章目录前言一、自定义对象1.创建对象方式二、使用步骤1.引入库2.读入数据总结前言这篇文章是既上篇DOM模型进行总结。基础的知识将会在这篇文章中完结。本篇的主要内容是自定义对象和闭包。这两个知识点很重要的。一、自定义对象1.创建对象方式1.内容a.采用new函数的方式（用的多）b.采用创建类的方式c.采用var p = {}构造器（构造函数）：来初始化一个对象的属性的值的函数。通过new构造器的方式来创建对象（1）通过function来创建对象其中，属性和方法又可以分为私有
复制链接

扫一扫