原型和原型链

一、原型

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

相关推荐
前端开发与ui设计的老司机10 分钟前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人12 分钟前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景34 分钟前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
涔溪42 分钟前
HTML5 实现的圣诞主题网站源码,使用了 HTML5 和 CSS3 技术,界面美观、节日氛围浓厚。
css3·html5·节日
翻滚吧键盘1 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾1 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉1 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。1 小时前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)2 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~2 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel