原型和原型链

原型

JS声明构造函数(用来实例化对象的函数)时,会在内存中创建一个对应的对象,这个对象就是原函数的原型

原型规则

1. 所有的引用类型(数组、对象、函数)都具有对象特性,即可自由扩展属性(除了“null”以外)

var obj = {}; obj.a = 100;
var arr = []; arr.a = 100;
function fn() {}
fn.a = 100

2. 所有的引用类型(数组、对象、函数) 都有一个__proto__属性(隐式原型),属性值是一个普通的对象

// 继承1的代码
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)

3. 所有的函数都有一个prototype属性,属性值也是一个普通的对象

// 继承1的代码
console.log(fn.prototype)

4. 所有的引用类型(数组、对象、函数)的 __proto__ 属性值指向它的构造函数的 prototype 属性值

// 继承1的代码
console.log(obj.__proto__ === Object.prototype)

5. 当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找

// 构造函数
function Foo(name) {
    this.name = name
}
Foo.prototype.alertName = function() {
    alert(this.name)
}

//创建实例
var f = new Foo('zhangsan')
f.printName = function() {
    console.log(this.name)
}

// 测试
f.printName()
f.alertName() // 从Foo构造函数的prototype中寻找

原型链

当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的__proto__(即它的构造函数的prototype)中寻找,如果还没有找到 就会再构造函数的prototype的__proto__中寻找,这样一层一层向上寻找就会形成一个链式结构,我们成为原型链。

// 继承 5 的代码
f.toString() // 要去f.__proto__.__proto__中寻找


instanceof

f instanceof Foo 的判断逻辑是:f的__proto__一层一层往上,能否对应到Foo.prototype

同理 f instanceof Object 结果也是true, 只要在一条链上的都为true

f instanceof Foo // true
f instanceof Object // true

两个结果都是true, 那么怎么判断f 是从Foo生成的实例还是从Object生成的实例呢?接下来就要用到原型对象上的constructor属性了

f.__proto__.constructor === Foo // true
f.__proto__.constructor === Object // false

所以用constructor来判断比用instanceof更加严谨。

 new运算符

原理:

1. 一个新对象被创建,它继承自foo.prototype

2. 构造函数foo被执行。执行的时候,相应的传参会被传入,同时上下文(this) 会被指定为这个新实例。

3. 执行结果如果返回了一个对象,那么这个对象会取代整个new出来的结果;如果没有返回对象,那么new出来的结果为步骤1创建的对象。

// 仿new原理
var new2 = function(fun) {
    var obj = Object.create(fun.prototype)
    var k = fun.call(obj)
    if (typeof k === 'object') {
        return k
    }
    return obj
}

var M = function(name) {this.name = name}
var o2 = new2(M)

console.log(o2 instanceof M) // true
console.log(o2 instanceof Object) // true
console.log(o2.__proto__.constructor === M) // true

M.prototype.walk = function(console.log('walk'))

o2.walk() // walk

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值