JavaScript 原型对象 基本了解

原型对象的含义就是 爹对象
打个比方:比如说有人问你要打火机,你说没有,但是你知道你父亲抽烟的,并且你知道现在怎么找到你父亲,你就会喊一下你父亲,问他要打火机,于是你父亲掏出打火机给那个人。
这里面我们注意,打火机是你父亲拥有的东西,你并不拥有,但是你可以通过你父亲把打火机借给那个人。
你父亲就是你的原型对象。

function foo() {
    
    }
let f1 = new foo()

三个概念:

  1. _proto_ ,一般的对象通过这个属性指向它的原型对象,对象指向对象
  2. constructor,对象指向函数,指向这个对象的构造函数
  3. prototype,函数指向对象,指向这个函数的原型对象,也就是这个函数所创建的实例对象的原型对象(f1._proto_ === foo.prototype)
console.log(f1.__proto__) // foo {}
console.log(f1.constructor) // [Function: foo]
console.log(f1.prototype) // undefined

console.log(foo.__proto__) // [Function]
console.log(foo.constructor) // [Function: Function]
console.log(foo.prototype) // foo {}

如果我们没法直接访问一个对象中想要的属性(因为它不存在),会自动去对象的原型对象中去查找,一直找到Object的原型对象(也就是null),此时就会返回一个undefined,表示没找到。
这就是我们说的原型链

对于以上代码,我们发现f1的prototype是undefined
这是因为
__proto__和constructor是对象所独有的,prototype是函数所独有的
又因为在js中函数也是对象,所以函数也拥有__proto__和constructor

ps:所有函数最终都是由Function()构造而来的,并且Function()的构造函数就是Function()本身

foo.prototype.name = '红茶'
console.log('f1的name属性是:' + f1.name) // f1的name属性是:红茶

我们发现f1并没有name这个属性,但是还是输出了,因为foo.prototype和f1.__proto__是同一个对象,顺着这个原型链就可以找到name这个属性。

f1.__proto__.name = '绿茶'
console.log('添加属性后f1的name值为:' + f1.name) // 添加属性后f1的name值为:绿茶

当f1本来就有name属性时,自然就优先输出f1自己的name属性。

猜你喜欢

转载自blog.csdn.net/weixin_45543674/article/details/118584451