js原型与原型链

原型

1.所有的引用类型(函数,对象,数组)都有_proto_(隐式原型)属性
2.所有的函数都有prototype(显式原型)属性

原型与实例之间的关系

每个构造函数(Person)都有一个原型对象(Person.prototype),原型对象都包含一个指向构造函数(Person)的指针(Person.prototype.constructor),而实例(Person1,Person2)都包含一个指向其构造函数(Person)的原型对象(Person.prototype)的内部指针(Person.__proto__)。
在这里插入图片描述

function Person() {

         }
         
         Person.prototype.peo = {
            name: '小红',
            age: '18',
            job: 'software Engineer',
            sayName: function() {
               console.log(this.name);
            }
         }

         var person1 = new Person();
         var person2 = new Person();

         console.log(Person.prototype.constructor == Person); //ture
         console.log(person1.__proto__ === Person.prototype) //true
         console.log(person2.__proto__ === Person.prototype) //true

原型链

原型链基于_proto_

1.每个实例对象(person1)都有一个私有属性(person1._proto_)指向他的构造函数的原型对象(Person.prototype),该原型对象也有一个自己的原型对象(Person.prototype._proto_),层层向上直到一个对象的原型对象为null。根据定义,null没有原型,并作为这个原型链的最后一个环节。

2.js中,每个对象都会在内部生成一个__proto__ 属性,当我们访问一个对象属性时,如果这个对象不存在就回去__proto__指向的对象里面找,一层一层找下去,这就是javascript原型链的概念。

person1.__proto__ ==> Person.prototype ==> Person.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

3.JS中所有的东西都是对象,所有的东西都由Object衍生而来, 即所有东西原型链的终点指向null。

4.几乎所有的js中的对象都是位于原型链顶端的Object的实例。

function Test(name) {
            this.name = name;
         }
         Test.prototype.outPut = function() {
            console.log(this.name);
         }
         var fun = new Test('sissi');
         fun.outPut();

         console.log(fun.__proto__ === Test.prototype); //true
         console.log(fun.__proto__.constructor === Test); //true
         console.log(Test.prototype.constructor === Test); //true
         
        //原型链
         console.log(fun.__proto__);
         console.log(fun.__proto__.__proto__);
         console.log(fun.__proto__.__proto__ === Object.prototype); // true
         console.log(fun.__proto__.__proto__.__proto__); //null

         console.log(Test.prototype);
         console.log(Test.prototype.__proto__);
         console.log(Test.prototype.__proto__ === Object.prototype); //true
         console.log(Test.prototype.__proto__.__proto__); //null	

属性查找

原型链查找:
当查找一个对象的属性时,js会向上根据__proto__遍历原型链,直到找到该属性为止,如果查找到原型链的最顶端(Object.prototype)时,还是没有找到该属性,则返回undefined。

hasOwnProperty方法查找:
查找时若想避开原型链查找,可以使用hasOwnProperty方法来查找,因为hasOwnProperty是js中唯一一个处理属性但是不查找原型链的函数

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值