原型和原型链，作用域链区别

最新推荐文章于 2023-03-26 13:58:37 发布

Always_OL

最新推荐文章于 2023-03-26 13:58:37 发布

阅读量8k

点赞数 1

分类专栏： js 文章标签：作用域链原型链原型

本文链接：https://blog.csdn.net/nideshijian/article/details/52807557

版权

js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

原型和原型链，作用域链区别：

在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链（比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的）

一般来说，作用域链是针对变量的，js里面大的范围上来说，只有两种作用域，全局作用域和函数内部作用域，如果函数1里面又定义了函数2（一般都是匿名函数）， 那么就有了这么一个作用域链全局作用域==>函数1作用域==>函数2作用域；特点是函数1里面可以直接使用全局作用域的变量，函数2里面可以直接使用全局作用域和函数1作用域的变量
原型链的话，一般是定义构造函数时用到，可以认为是针对构造函数的或者说针对构造函数对应的类的；原型链的头部就是Object类/构造函数，如果有构造函数1.prototype = 构造函数2；那么也就有这么一个原型链； Object ==> 构造函数1 ==> 构造函数2，这样的好处是构造函数2对应的类，可以拥有构造函数1 和Object中的属性，js没有对应继承的关键字，所以用原型链来模拟继承的效果。

原型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>原型</title>
	</head>
	<body>
		<script>
			//js所有函数都有一个prototype属性，这个属性引用了一个对象，即原型对象，也简称为原型
			function CreateDog(name,color){
				this.name = name;
				this.color = color;
			}
			//prototype  作用是 扩展了方法对象的属性
			CreateDog.prototype.swiming = function (){
				console.log(this.name + '在游泳');
			};
			var dog1 = new CreateDog('泰迪','棕色');
			dog1.swiming();
			var dog2 = new CreateDog('萨摩耶','白色');
			dog2.swiming();
			//判断一下dog1 是不是由CreateDog 构造出来
			//instanceof 运算符  可以用来判断对象的类型，更重要的 可以在继承关系中判断一个实例是否是属于他的父类型
			console.log(dog1 instanceof CreateDog);
		</script>
	</body>
</html>

原型继承：

<span style="font-size:14px;">		<script>
			function Animal(name){
				this.name = name;
			}
			Animal.prototype.say = function(){
				console.log('呜呜呜呜呜呜');
			}
			var  animal1 = new Animal('猫');
			//animal1.say();
			//function对  有没有“叫”的功能
			function Dog(dogName){
				this.dogName = dogName;
			}
			//继承
			Dog.prototype = Object.create(Animal.prototype);
			//Dog.prototype = animal1;
			var dog1 = new Dog('泰迪');
			dog1.say();
		</script></span>

原型链：

		<script>
			//原型链  是一个链条的 形式，可以把对象串联起来
			function CreateDog(name,color){
				this.name = name;
				this.color = color;
			}
			CreateDog.prototype.call = function(){
				console.log(this.color + this.name + '在叫！');
			};
			var dog  = new CreateDog('萨摩耶','白色');
			dog.call();
			//访问原型的方法
			//1.通过构造函数来访问
			//console.log(CreateDog.prototype);
			//2. 通过实例化的对象来访问
			//console.log(dog.__proto__);
			//js 在创建对象（任何对象，普通对象和函数对象）的时候，都有一个__proto__的属性，
			//这个属性用于指向创建他的函数对象的原型对象prototype
			console.log(dog.__proto__ === CreateDog.prototype);
			//同样的，CreateDog.prototype 对象也有一个__proto__   指向创建他的函数的原型对象 （object）的prototype
			console.log(CreateDog.prototype.__proto__ === Object.prototype);
			//Object.prototype  也有一个__proto__   指向null
			console.log(Object.prototype.__proto__ === null);
			//原型链  特点是：__proto__  属性，
		</script>

Always_OL

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
5
评论
原型和原型链，作用域链区别

原型和原型链，作用域链区别：在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己的原型.这样就形成了一条线性的链,我们称之为原型链（比如我们新建一个数组,数组的方法就是从数组的原型上继承而来的）一
复制链接

扫一扫