JS原型、原型链和原型链继承

什么是原型

prototype：原型，只有函数有这个属性，原型也是个对象

什么是原型链

原型链是由对象的__proto__属性连接的一个链条。对象.__ 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

原型链：

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

原型链继承

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

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

判断属性是否存在的方法

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

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

constructor

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

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

这篇好文章是转载于：学新通技术网