什么是JavaScript原型链?

引入

接触了大量类型的语言,我们对于继承的概念一定不陌生,不论是Java或者C++都是属于类继承的语言,而JavaScript的继承类型是基于原型的继承机制。

什么是基于原型的继承机制呢?大家都熟知类和对象的关系,也就是蓝图或者模板与实例的关系,ES6中JavaScript也引入了class的,但是相较于传统语言,JavaScript中的class的作用更倾向于语法糖,它的作用在于可以让对象原型的写法更清晰。

原型并不是class而是对象实例,也就是每一个实例化的对象,它都是一个原型模板。

什么是原型链?

原型链并不难理解,刚刚我们提到,每一个对象实例都是一个原型模板,并且,每一个原型也是一个对象,那么也就是说,每一个实例化的对象它既是对象也是原型,而原型之上又存在原型,那么这样一个实例对象连接着原型对象的链式结构,就形成了原型链。

prototype属性

每一个函数都具有prototype属性,简单来说,prototype属性指向一个函数的原型对象,而这个原型对象里包含继承的所有的属性的方法,而所有的对象实例都共享这个方法。

举个简单的例子我们创建一个函数Person,通过prototype属性添加了属性或方法,你以此为模板实例化出来的所有的实例化对象都完全具有这些属性或方法,并且可以修改使用,这说明,通过prototype属性我们可以为一个函数或者原型去添加属性方法

        // 创建一个Person函数
        function Person(){}
        //通过prototype属性添加属性或方法
        Person.prototype.name = 'zhangsan';
        Person.prototype.age = 18;
        Person.prototype.say = function(){
            console.log('zhangsan say Hi');
        }
        // 实例化一个person1  并调用他的属性和方法
        var person1 = new Person();
        console.log(person1.age); //18
        person1.say(); //zhangsan say Hi
        // 实例化第二个对象person2来和第一个person1对比
        var person2 = new Person();
        console.log(person1.say == person2.say); //true
        console.log(person1.age == person2.age); //true

接下来我们实例化一个person2并修改其中的某个属性例如age,并观察person1中的age。我们发现只有person2的age发生了改变,由此我们发现单纯修改属性是不会变更原型对象中的属性的。

        // 这个时候我们修改preson2中的age发现只有2发生了改变
        person2.age = 63;
        console.log(person2.age); //63
        console.log(person1.age); //18

那么我们如何去改变原型对象中的属性值呢?这个时候我们不得不提到我们的__proto__,在谷歌等浏览器中定义了一个__proto__来帮助我们完成此事,通过它你可以访问到继承的原型对象,并且去改变操作它,并且我们很快发现,所有的不论何时实例化的对象都发生的改变,因为原型对象发生了改变

        // 打印一下这个__proto__
        console.log(person2.__proto__);//{name: 'zhangsan', age: 18, say: ƒ, constructor: ƒ}
        // 这个时候我们修改preson2中的__proto__中的age
        person2.__proto__.age = 1800;
        // 新建第三个后我们发现不论是1还是3都受到了改变
        var person3 = new Person();
        console.log(person3.age);   //1800
        console.log(person1.age);   //1800

最后简单提一下,我们一般不直接操作原型对象,而是操作实例对象。

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值