当前位置：网站首页>原型和原型链

原型和原型链

2022-08-10 03:29:00 【Kⅈꫛᧁ269】

原型和原型链（创建对象的方法以及继承）

一、创建对象

1、通过构造函数 Object 创建对象

let obj = new Object();
obj.uname = "qweq";
obj.age = "3";
obj.sex = "男";
obj.phone = "1825555555";

2、字面量创建对象

let obj={
    uname : "qweq",
    age : "3",
    sex : "男",
    phone : "1825555555"
}

3、通过工厂函数创建对象【菩提函数，构造函数，工厂函数】

function creatPerson() {
     let obj = new Object();
     obj.uname = "uname";
     obj.age = "age";
     obj.sex = "sex";
     obj.phone = "phone";
     return obj;
 }
 
let student0=creatPerso("aaaaa",20,"12132312");
let student1=creatPerso("cccc",20,"12132312");
let student2=creatPerso("ssss",20,"12132312");
let student3=creatPerso("sssaa",20,"12132312");
let student4=creatPerso("wwww",20,"12132312");

4、通过构造函数实例化对象

构造函数函数名首字母必须大写

function Person(uname, age, sex) {
        this.uname = uname;
        this.age = age;
        this.sex = sex;
    }
let p = new Person("猿究院", 18, "男"); 	//实例化对象
let p1 = new Person("212", 18, "男");
console.log(p, p1);

二、原型

1、概念

所有引用类型都有一个__proto__（隐式原型）属性，属性值是一个普通的对象
所有函数都有一个prototype（原型）属性，属性值是一个普通的对象
所有引用类型的__ proto __（隐式原型）属性指向它的构造函数的prototype

let a = [1,2,3];
a.__proto__ === Array.prototype; 		// true

2、prototype与 proto

（1）概念

任何一个函数里面都有一个原型对象，所有函数都有原型对象

（2）用途及其用法

1、构造函数（Person）通过prototype访问原型对象存放公共方法

Person.prototype

2、实例对象p访问原型对象 __ proto __ 存放公共方法

p.__proto__

3、constructor 构造方法（原型对象创建的构造函数）

原型对象.constructor		//原型对象通过constructor 方法访问其构造函数

（3）整体代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
</body>
<script> // 所有函数都有原型对象 // 构造函数访问原型对象 prototype --- 存放公共方法 // 实例对象访问原型对象 __proto__ --- 存放公共方法 // constructor 构造方法（原型对象创建的构造函数） // 构造函数 function Person(name,age,sex){
       this.name = name; this.age = age; this.sex = sex; } //在构造函数的原型上添加公共方法 Person.prototype.money = function(){
       // 原型对象中的 this 指向 调用他的实例对象 console.log(this.name+"---这是原型对象上的挣钱方法"+this.age); } let p = new Person("猿究院",18,"男"); //实例对象 let p1 = new Person("html",20,"nv"); //实例对象 console.log(p,p1); p.money(); p1.money(); Object.prototype.phone = "222222222222"; Person.prototype.phone = "1111111111"; p.phone = "333333333"; console.log(p.phone); </script>
</html>

三、原型链

当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的__ proto __隐式原型上查找，即它的构造函数的prototype，如果还没有找到就会再在构造函数的prototype的 __ proto __中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。

在这里插入图片描述

①一层一层往上找，若直到找到null还没有找到，则返回undefined

②Object.prototype.__ proto __ === null

③所有从原型或更高级原型中的得到、执行的方法，其中的this在执行时，指向当前这个触发事件执行的对象

四、继承

1、概念

（1）在原有的类的基础上快速增加新的功能

（2）不影响到原来的类，也不改变原来类的代码，方便对于功能的扩展

（3）继承是一种创建新类的方式，新建的类可以继承一个或多个类。

（4）继承描述的是类和类之间的关系

（5）新建的类称为子类，之前存的类称为父类

2、在JS中的用途

利用原型及原型链实现继承【面向对象】
在这里插入图片描述

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
<script> // 利用原型及原型链实现继承【面向对象】 // 父 构造函数 function Father(name, age, sex) {
       this.name = name; this.age = age; this.sex = sex; } // Father构造函数的原型对象上的公共方法 Father.prototype.money = function () {
       // 原型对象上的 this 指向调用它的 实例对象 console.log(this.name + "……在挣钱"); } // 子 构造函数 function Son(name, age, sex) {
       // 指向创建它的实例对象 s // 使用 call() 立即调用父类方法，并传递参数【继承父类属性】 Father.call(this, name, age, sex); // 子类属性 this.email = email; this.name =name; this.age=age; this.sex=sex; } // 直接将父构造函数的原型对象赋值给子构造函数的原型对象 Son.prototype = Father.prototype; // 通过 new 将父类构造函数的 实例对象 赋值 给 son 的原型对象 Son.prototype = new Father(); // 利用 constructor 手动改变Son的原型对象的指向的构造函数 Son.prototype.constructor = Son; // 在Son 的 原型对象上添加 game 方法 Son.prototype.game=function(){
       console.log(this.name+"-----在玩游戏"); } let f = new Father("猿究院", 50, "男"); let s = new Son("猿究院", 50, "男"); console.log(f, s); f.money(); s.money(); s.game(); // f.game(); </script>
</html>