原型和原型链

一、原型

1、什么是原型

原型:每一个JavaScript对象(除null)创建的时候,都会与之关联另一个对象,关联的这个对象就是我们所说的原型,每一个对象都会从原型中"继承"属性

let obj = new Object();

创建一个对象的时候都会同时关联一个对象,关联的这个对象就是新建的对象obj的原型。

2、prototype:在JavaScript中,每个函数都有一个prototype属性,这个属性指向函数的原型对象

javascript 复制代码
       function Person(name,age){
        this.name = name,
        this.age = age
       }
       Person.prototype.show = function(){
        console.log(`姓名:${this.name} 年龄:${this.age}`);
       }
       let p1 = new Person('小张',20)
       p1.show();
       let p2 = new Person('小王',30)
       console.log(p2);

函数的prototype指向了一个对象,而这个对象正是调用函数时创建的实例的原型,也就是p1和p2的原型。

3、为什么要使用原型

定义构造函数的方法是最好使用原型的方式,因为通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存。

4、proto

__proto__这是每个对象(除null外)都会有的属性,这个属性会指向该对象的原型

javascript 复制代码
       function Animal(weight){
        this.weight
       }
       Animal.prototype.height = 10
       let cat1 = new Animal(20)
       let cat2 = new Animal(10)
       console.log(cat1.__proto__ === Animal.prototype);
       console.log(cat2.__proto__ === Animal.prototype);

5、constructor

函数通过prototype属性指向其原型对象,其原型对象通过constructor指向其构造函数,每个原型都有一个constructor属性,指向该关联的构造函数。

构造函数、原型对象和实例对象之间的关系

6、原型的原型

(1)原型:是一个对象,该对象中定义公共的属性和方法

(2)原型也有__proto__属性

总结:

(1)原型对象是一个定义了公共属性和方法的对象

(2)原型就是引用类型开辟了一个公共的区域,在这个区域中定义了属性和方法,凡是同构引用类型创建的对象

(3)作用:减少内存资源的消耗、实现继承

二、原型链

如图所示,一个对象可以是原型的新版本,同时也是另一个对象的原型。因为,当你尝试访问对象上的属性时,JavaScript引擎开始从对象自身查找该属性,如果没有,它会继续检查__proto__,一直到没有__proto__或者找到该属性。如果找到最后,此属性不存在时,返回undefined。

原型链结构特点:

(1) 每个构造函数都有一个prototype属性指向原型对象

(2)原型对象通过constructor属性指向构造函数

(3)通过实例对象的__proto__属性可以访问原型对象

(4)Object的原型对象的__proto__属性为null

应用举例:

给Array的原型上添加数组累计求和的方法

javascript 复制代码
    Array.prototype.sum = function(){
        let sum = 0;
        for(let i = 0;i<this.length;i++){
            sum += this[i]
        }
        return sum
    }
    let arr = [1,2,3,4,5,6]
    console.log(arr.sum()); 

原型继承:

主要思想:利用原型让一个引用类型继承另一个引用类型的属性和方法

javascript 复制代码
        function Animal(){
            this.type = '动物',
            this.colors = ['黑色','白色','黄色','粉色']
        }
        function Cat(name,age){
            this.name = name,
            this.age = age
        }
        Cat.prototype = new Animal()

        let cat1 = new Cat('小白',3);
        console.log(cat1);
        console.log(cat1.type);
        console.log(cat1.colors);

由结果来看,是存在问题的,当Cat通过原型继承了Animal后,Cat.prototype就变成了Animal的一个实例,因此也拥有了自己的colors

属性,结果:Cat的所有实例都会共享colors属性

相关推荐
前端极客探险家2 分钟前
如何实现一个支持拖拽排序的组件:React 和 Vue 版
前端·vue.js·react.js·排序算法
yanyu-yaya6 分钟前
devextreme-react/scheduler 简单学习
前端·学习·react.js
limit for me11 分钟前
react使用eventBus在不同模块间进行通信
前端·react.js
__不想说话__38 分钟前
面试官问我React组件和state的关系,我指了指路口的红绿灯…
前端·javascript·react.js
一个小潘桃鸭41 分钟前
需求:对表格操作列中的操作进行局部刷新
前端
番茄比较犟42 分钟前
Combine知识点switchToLatest
前端
北京_宏哥42 分钟前
🔥《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(15)-Charles如何配置反向代理
前端·面试·charles
Process1 小时前
前端图片技术深度解析:格式选择、渲染原理与性能优化
前端·面试·性能优化
大松鼠君1 小时前
轿车3D展示
前端·webgl·three.js
却尘1 小时前
URL参数传递的两种方式:查询参数与路径参数详解
前端