javascript的两大“神兽”之一,原型

函数的prototype属性

  1. 每一个函数都有一个prototype属性,默认指向一个Object空对象(原型对象)
function fun() {}
console.log(fun.prototype) // 默认指向一个Object空对象(没有我们的属性)

在这里插入图片描述
原型对象中有一个属性constructor,它会指向函数对象

console.log(fun.prototype.constructor === fun)
// true

总结起来函数的prototype属性:
在这里插入图片描述

  1. 给原型对象添加属性(一般是方法)
    作用:函数的所有实例对象自动拥有原型中的属性(方法)
    在这里插入图片描述
    给原型对象添加属性(一般是方法)===> 实例对象可以访问
function Fun() {}
Fun.prototype.test = function () {console.log('test')}
var fun = new Fun()
fun.test()
// test

显式原型与隐式原型

1.每个函数function都有一个显式原型 ( prototype )

function Fun() {} //  内部语句:this.prototype = {}
console.log(Fun.prototype)

在这里插入图片描述
2. 每一个实例对象都有一个__proto__ , 即隐式原型

var fn = new Fun() // 内部语句:this.__proto__ = Fun.prototype 
console.log(fn.__proto__) 

在这里插入图片描述
3.对象的隐式原型的值为其构造函数的显式原型的值

console.log(Fun.prototype === fn.__proto__)
// true

总结:

  1. 函数里面有个prototype属性指向原型对象,实例化对象里面有个__proto__属性他也指向原型对象,且与构造函数的原型对象是同一个,原型对象里面有个constructor属性他指向的是构造函数
  2. 函数的prototype属性:在定义函数时自动添加的,默认值是一个空object对象
  3. 对象的__proto__属性:创建对象时自动添加的,默认值为构造函数的prototype属性值
  4. 程序员能直接操作显式原型,但不能直接操作隐式原型(ES6之前)
  5. 实例对象的隐式原型等于构造函数的显示原型

内部原理:
在这里插入图片描述

原型链

1.访问一个对象的属性时:
先在自身属性中查找,找到返回
如果没有,再沿着_proto_这条链向上查找,找到返回
如果最终没找到,返回undefined
从始至终于显式原型没有关系所以原型链别名:隐式原型链
原型链的作用:查找对象的属性(方法)
在这里插入图片描述

2.构造函数/原型/实体对象的关素(图解)

var  o1 = new Object()
var o2 = {}

在这里插入图片描述

3.构造函数/原型/实体对象的关系2(图解)

function Foo() {} 

在这里插入图片描述
4.补充:
函数的显式原型指向的对象默认是空Object实力对象(但Object不满足)
所有函数都是Function的实例(包含Function)
5.作用:
查找对象的属性(方法)
1.读取对象的属性值时:会自动到原型链中查找
2.设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值

function Fn() {

        }
        Fn.prototype.a = 'xxx'
        var fn = new Fn()
        console.log(fn.a,fn)

在这里插入图片描述

3.方法一般定义在原型中,属性一般通过构造函数定义在对象本身上

 function Person(naem, age) {
            this.name = name
            this.age = age
        }
        Person.prototype.setName = function (name) {
            this.name = name
        }
        var p1 = new Person('Tome', 12)
        p1.setName('Jery')
        console.log(p1)

在这里插入图片描述

原型继承

构造函数的实例对象自动拥有构造函数原型对象的方法(属性),利用的就是原型链

instanceof是如何判断的

  1. 表达式:A instanceof B
    如果B函数的显式原型对象在A对象的原型链上,返回true,否则返回false
  2. Function是通过new自己产生的实例
  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值