目录
十八、组件————温开水的复习笔记_咕噜一口温开水的博客-CSDN博客
一、什么是原型（原型的基本概念）
笼统来说：
任何一个JavaScript对象（一般有对花括号）都有一个原型对象，这个原型对象是JavaScript语言内置的，JavaScript对象可以使用原型对象的属性和方法。
也可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。
再来一通不怎么好理解的：
（1）前置知识
JS中对象大致可以分为两类，即：普通对象Object 和 函数对象Function。一般而言，通过new Function产生的对象是函数对象，其他对象都是普通对象。两个基本：①只要创建了对象（无论是函数对象还是普通对象），都自带一个_proto_属性（可称为隐式原型），一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。②其中函数对象除了和其他对象一样有上述_proto_属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向的对象正是调用该构造函数而创建的实例的原型，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。
（2）抽象阐述
每个javascript对象都有一个原型对象，这个对象在不同的解释器下的实现不同。比如在firefox下，每个对象都有一个隐藏的__proto__属性，这个属性就是“原型对象”的引用。如果对象没有显式的声明自己的”__proto__”属性，这个值默认的设置为Object.prototype,而Object.prototype的”__proto__”属性的值为”null”，标志着原型链的终结。
由于原型对象本身也是对象，根据上边的定义，它也有自己的原型，而它自己的原型对象又可以有自己的原型，这样就组成了一条链，这个就是原型链，JavaScritp引擎在访问对象的属性时，如果在对象本身中没有找到，则会去原型链中查找，如果找到，直接返回值，如果整个链都遍历且没有找到属性，则返回undefined.原型链一般实现为一个链表，这样就可以按照一定的顺序来查找。
下面代码帮助理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//什么是原型？
//每一个对象都有它的原型对象，它可以使用自己原型对象上的所有属性和方法
let dog = {
name:"狗勾"
}
dog.__proto__.eat = function (){//1、通过对象的__proto__获取
console.log("啃骨头1");
}
dog.eat();
//获取原型的方法：
//1、通过对象的__proto__获取
//2、通过构造函数的prototype属性拿到原型
function Dog(name, age){
this.name = name;//面试题：构造函数中的this指向谁？ 答：指向new创建的对象
this.age = age;
}//构造函数
let dogfn = new Dog("狗勾", 6); //使用new来创建对象(细品)
Dog.prototype.eat = function (){
console.log("啃骨头2");
}
dogfn.eat();//调用函数
</script>
</body>
</html>
二、原型的作用
下面来简单说说原型在实际项目中有什么用？
注意一点：扩展对象
举一个例子：我希望自己实现一个功能，输出特定格式的日期字符串
先了解下面的知识点：
1）JavaScript语言中有内置变量类型为8种，为Number、String、Boolean、Null、undefined、object、symbol。
2）object包含了Data（时间相关）、function、Array等，这三种是常用的。
3）基本类型（单类型）：除Object外的 String、Number、boolean、null、undefined。
引用类型：object，里面包含的 function、Array、Date等
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//原型对象有什么作用
let date = new Date();
Date.prototype.myFunction = function (){
let year = this.getFullYear();
let month = this.getMonth() + 1;
let date = this.getDate();
return `${year}年${month}月${date}日`;
}
console.log(date.myFunction());
</script>
</body>
</html>
三、面向对象的程序设计
在ES5时我们是使用构造函数来创建对象，到了ES6时加入了新语法类来帮助我们创建对象，在类中加入属性和方法
由于这个新特性，我们获取原型的方法又多了一条
小总结
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//ES6类的语法
class Dog{
constructor(name, age) {
this.name = name;
this.age = age;
}
}
Dog.prototype.eat = function(){
console.log("啃骨头");
}
let dog = new Dog("狗勾",6);
console.log(dog);
dog.eat();
</script>
</body>
</html>
四、继承
继承：子对象可以使用父对象上的所有属性和方法
（一）ES6中类的继承
我们来通过一个场景来帮组理解
场景：博客系统
博客用户和管理员，两者都可以登录博客，但管理员可以删除一个人
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//场景：博客系统
//博客用户和管理员，两者都可以登录博客，但管理员可以删除一个人
class User{
constructor(name, password) {
this.name = name;
this.password = password;
}
login(){
console.log("登录");
}
}
class Admin extends User{
deletePerson(){
console.log("删除一个人")
}
}
let admin = new Admin("amin", "admin");
admin.login();
admin.deletePerson();
console.log(admin);
</script>
</body>
</html>
（二）ES5中的继承（基于原型的继承）
思路：
Admin对象可以使用原型上的所有属性和方法（特性）。若将原型对象设置为User的实例，那么Admin就可以使用User的所有的属性和方法。这就是一个基于原型的继承。像一个链条串起来了。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//场景：博客系统
//博客用户和管理员，两者都可以登录博客，但管理员可以删除一个人
// class User{
// constructor(name, password) {
// this.name = name;
// this.password = password;
// }
// login(){
// console.log("登录");
// }
// }
//
// class Admin extends User{
// deletePerson(){
// console.log("删除一个人")
// }
// }
//
// let admin = new Admin("amin", "admin");
// admin.login();
// admin.deletePerson();
// console.log(admin);
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();//实现继承
const admin = new Admin("admin", "password");
admin.login();
admin.deletePerson();
console.log(admin);
</script>
</body>
</html>
五、原型链
这种原型对象链式的继承和调用我们称之为原型链。
类中的extend可理解为相当于下面的
Admin.prototype = new User();//实现继承下面有个有趣的例子
1、首先，在Oject原型上设置一个login方法
function User(username, password){
this.username = username;
this.password = password;
}
function Admin(){
this.deletePerson = function(){
console.log("删除");
}
}
Admin.prototype = new User();//实现继承
Object.prototype.login = function(){
console.log("Object原型上的登录方法");
}
const admin = new Admin("admin", "password");
admin.login();
2、然后，声明和初始化一个数组
function User(username, password){
this.username = username;
this.password = password;
}
function Admin(){
this.deletePerson = function(){
console.log("删除");
}
}
Admin.prototype = new User();//实现继承
Object.prototype.login = function(){
console.log("Object原型上的登录方法");
}
const admin = new Admin("admin", "password");
admin.login();
let a = [1,2,3];
a.login();
object原型是底层的对象，任何一个对象（引用类型）都可以使用在object上创建的方法。
问题
1）object到底有啥？
2）对象和prototype对象是继承关系吗？
3）__proto__ 和 prototype区别，在普通对象、函数对象中表现为啥样的？
详解请看这些笔记
十八、组件————温开水的复习笔记_咕噜一口温开水的博客-CSDN博客
https://blog.csdn.net/qq_47286790/article/details/122893790
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
