关于原型及原型链

夺笋123

已于 2022-06-05 10:53:03 修改

阅读量122

点赞数

分类专栏： # js基础文章标签：原型模式 javascript 前端

于 2022-06-04 22:29:28 首次发布

本文链接：https://blog.csdn.net/m0_54510474/article/details/125110799

版权

js基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

关于js中的对象

js是一门面向对象的语言，但是在ES6之前，js不能够创建类，也不能通过类来创建对象，而是通过prototype

构造函数创建对象

由于ES6之前的语法中没有类的概念，所以可以利用构造函数代替类来创建对象，语法格式

function 构造函数(){
	this.属性;
	this.方法;
}
//创建实例化对象
var 对象名=new 构造函数()

构造函数与普通函数的区别：调用前者需要通过new关键字

对象属性的设置方法

//1. 通过构造函数编写属性
构造函数.prototype.属性名
//2. 定义实例对象时添加属性
对象名.属性名

实现继承

概念：继承，即复用一些原有的功能，子类通过继承的方法得到父类下的属性和方法
实现方式：通过在构造函数中直接调用的方式实现

通过call()方法实现继承

function Fo(){
	this.name="Tom"
	this.say=function(){
		console.log(`大家好，我叫${this.name}`)
	}
}
function Ch(){
	//调用构造函数，改变this指向
	Fo.call(this)
	this.name="Jerry"
	this.age=19
}
Ch.prototype.showage=function(){
	console.log(`我的年龄为${this.age}`)
}
let myobj1=new Fo("Tom")
let myobj2=new Ch("Jerry")
myobj1.say()
myobj2.say()
myobj2.showage()

存在的问题

没有解决构造函数传参的问题
注意构造函数的首字母大写

通过原型对象继承
创建一个构造函数后，它的默认原型对象为Object，我们可以通过.prototype属性修改其原型对象，从而使得通过这个构造函数创建的实例对象拥有一些中指定的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个html5 demo</title>
</head>
<body>
	<script>
		function Animal(name,height){
			this.name=name
			this.height=height
			this.bev=function(){
				console.log("我喜欢玩耍")
			}
		}
		function Cat(){
			this.age=3
			this.say=function(){
				console.log("喵喵")
			}
		}
		Cat.prototype=new Animal("小咪",23)
		cat1=new Cat()
		console.log(cat1.name)
		cat1.bev()
		cat1.say()
	</script>
</body>
</html>

Chrome浏览器运行结果
在这里插入图片描述

原型

概念：每一个js对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型。每一个对象都会从原型"继承"属性

创建某一个新的js对象时，即使该新对象是空的，当我们输出它时，我们发现它会有一个属性prototype
在这里插入图片描述
虽然我们没有在obj对象中定义方法，但是也能够调用一些方法

实际上这些方法是从prototype属性中继承得到的，也就是说prototype属性是obj的原型对象

原型链

概念：由相互关联的原型组成的链状结构

在js中，几乎所有的对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法。

下面我们通过一个例子来说明情况

var date=new Date()

date.__proto__===Date.prototype// true
Date===Date.prototype  //false
Date.prototype.__proto__===Object.prototype  //true
Date.prototype===Object  //false

typeof date  //'object'实例对象
typeof Date  //'function'构造函数
typeof Date.prototype  //'object'原型对象
typeof Object  //'function'构造函数
typeof Object.prototype  //'object'原型对象
typeof null  //'object'

实际上，object就是一个js内置的构造函数

上面我们定义了一个实例对象，下面我们来看这样一种情况

date.toString()

实际上，Date构造函数中并没有定义该方法，它是Object构造函数中定义的方法，下面我们通过一个流程图来看看，为了通过date实例对象调用该方法，js内部都做了些什么事情

在这里插入图片描述

通过上面的图我们可以看出，当date实例对象中没有toString()方法时，js会沿着原型链向上游原型对象中查找该方法，在Object的原型对象Object.prototype中找到了该方法，完成调用。实际上，原型链就是一个继承的例子

属性详解

prototype

每个函数都有一个 prototype 属性，该属性指向了一个对象，即调用该构造函数而创建的实例的原型

typeof Date.prototype  //"object"

proto

每一个js对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。

Date.prototype.__proto__===Object.prototype  //true
typeof Object.prototype //"object"

constructor属性

每个原型都有一个 constructor 属性指向关联的构造函数。

Date.prototype.constructor===Date// true

夺笋123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于原型及原型链

es6之前的对象创建、继承等方法，原型及原型链浅谈
复制链接

扫一扫

专栏目录