目录
十八、组件————温开水的复习笔记_咕噜一口温开水的博客-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