JS原型、原型链与原型链继承

140 阅读2分钟

什么是原型

prototype:原型,只有函数有这个属性,原型也是个对象,原型是为了实现对象继承出现的,原型里挂载要被继承的公共方法和属性。

什么是原型链

原型链是由原型为节点连接的一个链条。对象.__ proto __ 和构造函数.prototype相等,而构造函数.prototype也是个对象,具有__proto__属性,构造函数.prototype._ _proto__指向Object.prototype.

通过原型挂载的方法和属性可以被所有实例共享,当一个实例修改了这个属性或者方法,其它实例访问到的也是修改后的。

function Fn(){// 作为构造函数

            this.a=1

        }
        
Fn.prototype.hello=function(){
            this.c=3
}
let fn1=new Fn()        
let fn2=new Fn()
console.log(fn2.hello===fn1.hello)//true,指向同一个空间

//通过一个实例修改原型上的hello方法,另一个实例里的方法也会变
fn1.__proto__.hello=function(){

            console.log('我是hello,我被实例修改了')

        }

        console.log(fn1.hello);//我是hello,我被实例修改了

        console.log(fn2.hello);//我是hello,我被实例修改了

直接在构造函数里添加的属性和方法,在每个实例new出来时都会创建一份。

function Fn(){// 作为构造函数
            this.a=1
            function b(){
                console.log('bbb')
            }
        }
fn1.a=2
console.log(fn1.a,fn2.a)//2,1

原型链:

图片.png 原型链是以原型为节点,将对象与构造函数的原型对象连接起来的一个链。

原型链继承

对象可以继承原型和原型的原型上挂载的属性和方法,这就是原型链继承,当对象和对象原型上有相同的属性和方法时,首先找自身的。

function Fn(){

            this.a=1

        }

        fn1=new Fn()

        fn1.__proto__.b=2

        fn1.__proto__.__proto__.c=3

        console.log(fn1.a,fn1.b,fn1.c)//1,2,3
        
        //也可以这么写
        Fn.prototype.b=2

        Fn.prototype.__proto__.c=3

        console.log(fn1.a,fn1.b,fn1.c)//1,2,3
        
        //当对象和对象原型上有相同的属性和方法时,首先找自身的
        Fn.prototype.a=2
        console.log(fn1.a)//1
Function和Object

构造函数Fn()也是对象,相应的也有它的构造函数和原型,它是由Function构造出来的,它的原型是Function.prototype,同时Function也是个函数,也有自己的构造函数和原型对象,Function的构造函数是它自身,原型对象也是Function.prototype。

console.log(Fn.__proto__)//ƒ () { [native code] }
console.log(Fn.__proto__===Function.prototype)//true

console.log(Fn.__proto__==Function.prototype)//true console.log(Function.__proto__==Function.prototype)//true

Object也是个函数,由Function构造出来的,它的原型是Function.prototype,和Fn()一样。

console.log(Object)//ƒ Object() { [native code] }
console.log(Object.__proto__);//ƒ () { [native code] }
console.log(Object.__proto__==Function.prototype);//true

图片.png

判断属性是否存在的方法

判断对象本身有没有某个属性:hasOwnProperty()

console.log(fn1.hasOwnProperty('b'));//false
constructor

指向实例化对象的构造函数 可以通过这属性改变对象的构造函数

console.log(fn1.constructor==Fn);//true
fn1.constructor=Fn1
console.log(fn1.constructor);//ƒ Fn1(){}