原型对象prototype的推导过程 和 安全类

最新推荐文章于 2020-09-01 15:17:46 发布
最新推荐文章于 2020-09-01 15:17:46 发布
阅读量185 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript 原型prototype 安全类
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thunderevil35/article/details/80515240
版权

原型prototype的推导过程：

初始状态：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义构造函数
		function People(name, age, sex) {
			this.name = name;
			this.age = age;
			this.sex = sex;
			// 此时sayHello的赋值是一个函数， 也就是说，当函数执行的时候， 每一次都在定义一个函数，
			// 函数的功能是一致的， 但是函数的地址不是同一个。 
			this.sayHello = function () {
				console.log("我的名字叫做" + this.name);
			};
		}
		// 初始化两个对象
		var xiaoming = new People("小明", 12, "男");
		var xiaohong = new People("小红", 12, "女");

		console.log(xiaoming.sayHello === xiaohong.sayHello);
	</script>
</body>
</html>

改造一： 将构造函数中的方法提取出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义构造函数
		function People(name, age, sex) {
			this.name = name;
			this.age = age;
			this.sex = sex;
			// 函数的功能是一致的， 函数的地址同一个。
			this.sayHello = sayHello;
		}

		// 改造1： 将函数提取出来
		function sayHello() {
			console.log("我的名字叫做" + this.name);
		}
		// 初始化两个对象
		var xiaoming = new People("小明", 12, "男");
		var xiaohong = new People("小红", 12, "女");

		console.log(xiaoming.sayHello === xiaohong.sayHello);
	</script>
</body>
</html>

改造二：要是多种方法，还得定义很多全局方法，则将所有方法放在一个对象中,是全局变量压缩为一个

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 定义构造函数
		function People(name, age, sex) {
			this.name = name;
			this.age = age;
			this.sex = sex;
			// 函数的功能是一致的， 函数的地址是同一个。
			this.sayHello = obj.sayHello;
			this.say = obj.say;
			this.haha = obj.haha;
		}

		// 改造2: 将所有方法放在一个对象中,是全局变量压缩为一个
		var obj = {
			sayHello: function () {
				console.log("我的名字叫做" + this.name);
			},
			say:function () {
				console.log("wawawawawawaw")
			},
			haha:function () {
				console.log("hahahahaha")
			}
		}

		// 初始化两个对象
		var xiaoming = new People("小明", 12, "男");
		var xiaohong = new People("小红", 12, "女");

		console.log(xiaoming.sayHello === xiaohong.sayHello);
	</script>
</body>
</html>

改造三：虽然全局变量压缩成一个了，但是这一个也可以被省去

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 改造3： 之前改造2确实将全局变量压缩为一个了， 但是这一个对象也不可以存在。
		// 定义构造函数
		function People(name, age, sex) {
			this.name = name;
			this.age = age;
			this.sex = sex; 
			// 函数的功能是一致的， 函数的地址是同一个。
			this.sayHello = People.obj.sayHello;
			this.say = People.obj.say;
			this.haha = People.obj.haha;
		}

		// 改造2: 将所有方法放在一个对象中,是全局变量压缩为一个
		People.obj = {
			sayHello: function () {
				console.log("我的名字叫做" + this.name);
			},
			say:function () {
				console.log("wawawawawawaw")
			},
			haha:function () {
				console.log("hahahahaha")
			}
		}

		// 初始化两个对象
		var xiaoming = new People("小明", 12, "男");
		var xiaohong = new People("小红", 12, "女");

		console.log(xiaoming.sayHello === xiaohong.sayHello);
	</script>
</body>
</html>

原型的“诞生”：

    构造函数提供了一个prototype原型对象，这个原型对象是每一个函数都拥有的属性

    原型对象上的东西可以被实例化的实例共享

    原型的作用：共享方法

    以后给构造函数添加方法一定写在原型对象上添加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
        // 定义构造函数
	function People(name, age, sex) {
		this.name = name;
		this.age = age;
		this.sex = sex;
	}

	// 其实布兰达艾奇，早就考虑到了这一点， 为我们提供了一个People.prototype, 意思就是 原型 它是每一个函数都拥有的属性， 指向一个对象， 原型上面的东西， 可以被实例化的对象共享。
	
	People.prototype.sayHello = function() {
		console.log("我的名字叫" + this.name);
	}

	// 初始化两个对象
	var xiaoming = new People("小明", 12, "男");
	var xiaohong = new People("小红", 12, "女");
	xiaoming.sayHello();
	xiaohong.sayHello();
	console.log(xiaoming.sayHello === xiaohong.sayHello);

	// 原型的作用： 实例共享方法
	// 以后给构造函数添加方法， 一定要写在原型上面。
	</script>
</body>
</html>

安全类

定义： 无论如何调用类，总是返回类的实例。gouzao

解决问题： 有些程序员，在调用构造函数的时候，不使用new关键字，所以导致代码出问题。

    构造函数中：this 指向的是 实例对象

    普通函数中：this指向的是 window

拓展知识点：

    一个普通函数 没有返回值或者没有return 用一个变量接收，输出变量值为undefined

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	// 创建对象三种方式 字面量  构造函数  直接object（）
	// var obj = {};
	// var obj1 = new Object();
	// var obj2 = Object();
	// console.log(obj, obj1, obj2)



	// function People(name, age, sex) {
	// 	this.name = name;
	// 	this.age = age;
	// 	this.sex = sex;
	// }

	// // 实例化
	// // var p = new People("小红", 12, "男");
	// var p1 = People("小明", 12, "男");

	/*
	 * 拓展知识点：输出p1 是 undefined
	 * 一个普通函数 没有返回值或者没有return 用一个变量接受，变量值为undefined
	 */


	//  此时， 当使用new 调用People时候， 一切正常。
	//  但是，当做普通函数执行的时候， 将函数内部的this指向了window, 所以讲所有属添加给了window
	//  这个时候，这个类就不是安全类。



	// 我们要改造成为安全类

	// 分析： 当时用new调用时候， 内部的this是People的实例
	// 当做普通函数执行的时候后， 内部的this指向了window
	function People(name, age, sex) {
		// console.log(this)
		// 利用this指向来记性判断
		if (this === window) {
			// 说明当做了普通函数执行了， 普通函数要想返回内容 需要return;
			return new People(name, age, sex);
		} else {
			// 说明正常调用 一切照旧
			this.name = name;
			this.age = age;
			this.sex = sex;
		}
	}

	var p = new People();
	var p1 = People();


	// 安全类： 无论是如何调用函数， 都可以返回函数的实例化对象。
	</script>
</body>
</html>
MrShyZhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
西瓜书——支持向量机svm原型推导
baidu_38356450的博客
12-19 455
第一次听说支持向量机这个名词或许有点懵，这好像有点难以理解这个算法到底是干什么的。其实svm这个算法这个算法是用来分类的。目的是找到一个超平面然后把一堆数据划分成不同类别。映射到二维数据上面，那个超平面就是一条线了。如下图所示： 我们也能看到有很多的线可以划分这两类数据，那我们的目的就是要找一条类似与红色线的划分线。为什么呢？因为这样红线划分的时候划分更清晰，两边留出的“空隙”更多，更平均。因为我...
Object Prototypes (对象原型)
a70711342158890的博客
07-12 248
定义一个方法，传入一个string类型的参数，然后将string的每个字符间加个空格返回。 spacify('hello world') // => 'h e l l o w o r l d' function spacify(str){ 　　returen str.split('').join(' '); split方法 // 将一个字符串分割为子字符串，然后将结果作为...
互联网中级Javascript面试题
weixin_34038293的博客
12-09 261
互联网中级Javascript面试题 1.实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制考察点1：对于基本数据类型和引用数据类型在内存中存放的是值还是指针这一区别是否清楚考察点2：是否知道如何判断一个变量是什么类型的考察点3：递归算法的设计// 方法一：Object.prototype...
原型对象添加方法
Sumshine12.5
02-26 2461
在构造函数中为了避免创建多个对象，造成方法的重复创建，我们一般在原型对象上创建方法 如 Student.prototype.method=function(){ console.log(123); } 但这种方法仅适用于对象的方法较少时，如果对象方法有很多，就需要不断重复 类似Student.prototype.method=function..... 这样也很麻烦 我们可以通过类似于对象...
在原型对象上添加方法小例
weixin_34357267的博客
09-23 161
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <script> //给...
javascript当中的代码嗅探扩展原生对象和原型(prototype)
10-27
在JavaScript编程中，扩展原生对象和原型（prototype）是一个功能强大但需要谨慎使用的技巧。原生对象指的是JavaScript内置的对象，比如Array、String、Object等，而原型链是JavaScript实现继承的主要方式。通过给...
JavaScript为对象原型prototype添加属性的两种方式
10-28
在JavaScript中，我们经常需要为对象的原型添加属性或方法，以便实现继承和扩展对象的功能。原型继承是JavaScript中的一种核心概念，允许我们实现代码的复用和继承机制。在给定的文件内容中，提到了两种为对象原型...
js使用原型对象(prototype)需要注意的地方
10-19
需要注意的是，现代JavaScript开发推荐使用类（class）语法来定义构造函数和原型方法，这不仅使代码更加简洁，也更符合面向对象编程的原则。尽管如此，了解原型对象的内部工作原理和潜在问题对于写出健壮的...
javascript 对象 与 prototype 原型用法实例分析
10-16
主要介绍了javascript 对象 与 prototype 原型用法,结合实例形式分析了javascript 对象 与 prototype 原型实现对象创建、继承、拷贝等相关操作技巧,需要的朋友可以参考下
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
10-19
JavaScript中的原型(Prototype)是语言的核心特性之一，它在实现对象继承和共享方法时起着至关重要的作用。本文将深入探讨原型对象、原型链的概念，并通过实例解析它们的工作原理。 首先，每个函数都有一个名为`...
Java基础------真实大厂面试题汇总（含答案）
王伟的博客
02-16 2万+
面试题1. 按值传递和按引用传递的区别？ 面试题2. Java的Object类中有哪些方法，各自的用途？ 面试题3. 深拷贝和浅拷贝的区别，怎么实现深拷贝？ 面试题4. Final, finally, finalize的区别？ 面试题5. 讲一讲泛型，有没有在jdk源码层面研究过泛型 面试题6. .说一说java的异常体系， java是如何处理异常的？ 面试题7. Public、private、p...
为什么通用的对象方法要加在原型中
then啥
10-25 1094
在构造函数中加属性，原型中加方法。我学面向对象时一直记着的一句话，但为什么方法要加在原型呢，今天再次看望远镜书时终于明白了。 将属性和方法都写在构造函数中没问题，但问题在于每次进行实例化的过程中，重复创建功能不变的方法。 由于方法本质上是函数，其实也就是在堆内存中又新建了一个对象空间存储函数，造成了不必要的资源浪费。   解决办法除了使用原型外，也可以令其指向一个全局的函数，从而避免重复创...
利用原型添加方法和属性
hj1214095082的博客
08-13 2862
我们已经了解了如何定义构造器函数，并用来新建（构造）对象。这种做法的主要意图是通过new操作符来调用函数，以达到访问对象this指的目的，然后，构造器就可以将其所创建的对象返回给我们。这样我们就有了一种赋予新建对象一定功能（即为其添加属性和方法）的方法。 下面，让我们通过一个具体的构造器函数Gadget()，来看看它是如何在新建对象时添加属性和方法的 function Gadget(name...
理解对象&原型链实现继承 porortype __proto__
萝卜斯基先生的博客
04-15 433
理解对象&继承 创建对象的两种方式 new Object() 字面量 {} 对象的属性类型 数据属性(包含数据值) 数据属性的特性 configurabale true 能否delete 或修改数据特性(只能修改一次) enumerable true 能否通过for-in遍历 writable true 能否改值 value undefined 值 访问器属性(不包含...
解读prototype（感觉不错，厚颜无耻收藏了：)
Dickwin的专栏
02-12 1322
prototype 1.3.1 版本和之前的 1.2.0 版本有了不少改进,并增加了新的功能： 1. 增加了事件注册管理 2. 增加了空间定位的常用函数 3. 改善了 xmlhttp 的封装 4. 移除了 Effect.js，交给 Rico 或者 script.aculo.us 这些扩展库类实现。 5. bug 修复 代码: /**  * 定义一个全局对象, 属性 Version 在发布的
一个例子让你明白原型对象和原型链
热门推荐
追
06-12 3万+
开篇 之前对js中的原型链和原型对象有所了解，每当别人问我什么是原型链和原型对象时，我总是用很官方（其实自己不懂）的解释去描述。有一句话说的好：如果你不能把一个很复杂的东西用最简单的话语描述出来，那就说明你没有真正的理解。最近正在读《Javascript高级程序设计》，书中对原型对象和原型链的描述让我受益匪浅，下面仅用一个对比性的例子来说明。 我们经常会这么写 function Perso
js 原型继承 在对象原型上新增方法
weixin_43720534的博客
09-01 497
使用最新的方法Object.setPrototypeOf（类似Reflect.setPrototypeOf）可以很方便地给对象设置原型，这个对象会继承该原型所有属性和方法。 但是，setPrototypeOf的性能很差，我们应该尽量使用 Object.create()来为某个对象设置原型。 //obj的原型是Object.prototype var obj={ methodA(){ console.log("coffe"); } } var newObj = Object.
原型链——1
fqq_5280的博客
07-30 107
关于原型链的理解 这里有两个例子看到后让我觉得一目了然 var anmial = { name: "anmial", eat:function () { console.log(this.name + " is eating."); } } anmial.eat();//anmial is eating. anmial.color = "black";...
获取元素的定位参考元素和定位值（JavaScript 和 jQuery）
Mr.ShyZhang趟过的前端“小路坑”
05-27 5377
JavaScript获取元素的定位参考元素和定位值方法1. offsetParent 获取元素的定位参考元素    element.offsetParent 2. offsetLeft 获取元素到定位参考元素的左边距离    element.offsetLeft 3. offsetTop 获取元素的定位参考元素的上边距离    element.offsetTop  &lt;!DOCTYPE htm...
原型法与面向对象分析设计：对比与应用
"原型法和面向对象的分析与设计方法" 在IT行业中，原型法和面向对象的分析与设计方法是两种重要的系统开发策略，它们分别针对不同的挑战和目标。 原型法，作为应对20世纪70年代“软件危机”的解决方案之一，强调的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值