IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端--精神氮泵(二) ---原型 -> 正文阅读

[JavaScript知识库]前端--精神氮泵(二) ---原型

对于原型,有一篇很好的文章:(https://blog.csdn.net/weixin_38654336/article/details/83050165)
https://blog.csdn.net/u012468376/article/details/53121081

原型是js中继承的基础,这里有几个要知道的。
1.每个对象都有一个constructor属性指向它的构造函数。
2.每个对象都有一个__proto__ 属性指向它的原型。
3.实例对象中的prototype属性不可直接访问。

好了,开始:
我们每声明一个构造函数

function Person(){
				this.age=20;
				this.name="张三";
			 }

浏览器就会创建一个对象,这就是原型对象,原型对象存储在内存中了。这个原型对象就是以后实例对象的基类。

var person1=new Person();
			 console.log(person1.age);//20

这里new了一个对象,对于查找person1的属性,如果有它自己的属性就会先用它自己的属性,如果没有找到,就会到他的原型对象中找,这里的age就在原型对象中找到。

下面说说几个点,原型的全面了解建议看上面的连接
1.(上面文章的原话)
我们根据需要,可以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>

在构造中的方法,实例的对象都是各自独占一份的。

function Person(){
				this.age=20;
				this.name="张三";
				this.eat=function(){
					console.log("吃东西");
				}
			 }
			 var person1=new Person();
			 var person2=new Person();
			 console.log(person1.eat===person2.eat) //false

但是可以在原型对象中实现函数的共享

function Person(){
				this.age=20;
				this.name="张三";
			 }
			 Person.prototype.eat = function () {
			 		alert("吃");
			 	}
			 var person1=new Person();
			 var person2=new Person();
			 console.log(person1.eat===person2.eat) //true

顺便提一下,在js中,即使两个对象的属性和函数都相等,js也不会判断他们两个相等

3.对于
person1.__proto__是 Person.prototype
Person.__proto__是Function.prototype 的解释
1、首选__proto__是浏览器厂商实现的,W3C规范中并没有这个东西。
2、它的作用就是访问对象的原型。
3、对于js来说,一切皆对象,尤其是引用类型,更是如此。
4、所有的对象都有一个原型(null除外),函数是对象,那么函数也不例外。所以Person.__proto__就是访问这个构造函数的原型。
5、每一个函数都有一个prototype属性,属性的值也是一个对象,称为原型对象。所以Person.prototype访问的就是这个Person类的原型对象。
6、抛开__proto__来说,通过属性访问Person的原型可以这样写:Person.constructor.prototype。也就是说
Person.contractor.prototype === Person.proto //true;
7、假如实例化Person,var p = new Person();综上所述,
p.constructor === Person // true;
p.constructor.prototype === Person.prototype // true;
不知道这样解释能理解嘛。(大佬的原话…)

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-30 08:37:40  更:2022-04-30 08:39:40 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:55:16-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码