原型的基本概念
1.什么是原型?
原型就是个对象
每个对象都有他自己对应的原型对象,每个对象都可以使用他对象对应的原型对象上面的所有的属性和方法
(原型对象是js语言内置)
2. 获取原型上的属性和方法的3种方式
(1) 通过对象__proto__获取
//例子
let cat = {
name:'喵喵'
}
cat.__proto__.eat = function(){
console.log('吃鱼')
}
cat.eat()//打印出 吃鱼
(2) 通过构造函数的prototype属性获取
//例子
function Cat (name, age) {
this.name = name
this.age = age
}
let cat = new Cat('喵喵', 2)
Cat.prototype.eat = function() {
console.log("吃鱼")
}
cat.eat()//打印出 吃鱼
解:
Cat是函数,函数的基本类型是对象,对象就有原型,所以可以使用Cat.prototype
(3) 通过类的prototype属性获取
注:es5创建对象用函数构造函数,es6创建对象用class类创建构造函数
//es6类的基本语法
class Cat{
constructor(name,age){
this.name = name
this.age = age
}
}
Cat.prototype.eat=function(){
console.log('吃鱼')
}
let cat = new Cat('喵喵',2)
console.log(cat.name)//打印出 喵喵
3. 原型对象具体在实际项目中有什么用?
可以通过prototype扩展对象
let date = new Date()
console.log(date)//时间对象
//希望输出的是中文格式的日期:2022年6月29日
date.formate()
Date.prototype.formate = function(){
let year = this.getFullYear()
let month = this.getMonth()+1
let date = this.getDate()
return `${}year}年${month}月${date}日`
}
4. 什么是继承?
继承就是,子对象他可以使用他父对象上的所有属性和方法
使用场景:
(1) 使用es5实现继承,需要使用到prototype(基于原型的基础案例)
User
|
|
|
prototype === new User
|
|
|
Admin
//让Admin和User建立关联
解:
Admin可以使用它自己原型prototype上的属性和方法(系统默认可以使用,js内置)
要想让Admin可以使用User上的属性和方法,那么就让Admin的原型prototype=User的实例 new User(),因为User实例肯定有User构造函数的所有属性和方法,而Admin的原型prototype又是User的实例,那么Admin就可以使用User上的所有属性和方法,这就实现了基于原型的继承
function User(username,password){
this.username = username
this.password = password
this.login= function(){
console.log('登录')
}
}
function Admin(){
this.deletePerson = function(){
console.log('删除一个人')
}
}
Admin.prototype = new User()
let admin = new Admin()
admin.login()//打印出 登录
admin.login()//打印出 Object (如果user没有login方法)
======================================================
//如果user没有登录方法,那么他的原型会一直往上找 直到找到object的原型的登录方法
//所有对象的最上层都是object.prototype
所有的对象,所有的引用类型,都可以调用Object.prototype
Object.prototype.login = function(){
console.log('Object原型上的登录方法')
}
例如:
let array = [1,2,3]
array.login()//打印出来都是Object原型上的登录方法
(2) 使用es6实现继承
博客有普通用户和管理员用户
class user{
constructor(username,password){
this.username = username,
this.password = password
},
login(){
console.log("登录")
}
}
class Admin extends User{
deletePerson(){
console.log('删除一个人')
}
}
let admin = new Admin()
admin.login()//打印出 登录 --- 继承了user的方法
admin.deletePerson()//打印出 删除一个人 ---- 使用他自己的方法
5. 什么是原型链
原型是对象,那么这个原型对象也有自己的原型,无限原型—原型链