原型和原型链

一、原型

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属性

相关推荐
旭日猎鹰4 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye11 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm13 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x39 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚41 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
sinat_384241091 小时前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron