js原型相关问题。。

每一个JavaScript对象都和另一个对象相关联,相关联的这个对象就是我们所说的“原型”。每一个对象都会从原型继承属性和方法。有一个特殊的对象没有原型,就是Object,还有一种通过Object.create()创建的对象,如果传入的第一个参数为null,也没有原型。在之后的图示中会进行说明。

举个栗子,我们首先声明一个函数Student():

1 function Student(name){
2     this.name = name;
3     this.hello = function(){
4         alert(`Hello,${this.name}`);
5     }
6 }
这个函数包含一个属性name和一个方法hello。
在JavaScript中,可以通过new关键字来调用Student函数(不写new就是一个普通函数,写new就是一个构造函数),并且返回一个原型指向Student.prototype的对象,如下所示:

1
var xiaoming = new Student("xiaoming"); 2 alert(xiaoming.name); // xiaoming 3 xiaoming.hello(); // Hello,xiaoming
如果我们想确认一下我们的设想对不对,就会希望去比较一下xiaoming.prototype和Student.prototype是否相等。
但是xiaoming没有prototype属性,不过可以用__proto__来查看。接下来我们就用这些属性来查看xiaoming,Student,Object之间的原型链:
复制代码
document.onreadystatechange = function(){
    // interactive表示文档已被解析,但浏览器还在加载其中链接的资源
    if(document.readyState === "interactive"){
        var xiaoming = new Student("xiaoming");
        alert(xiaoming.name);
        xiaoming.hello();
        console.log("xiaoming.__proto__:");
        console.log(xiaoming.__proto__);
        console.log("Student.prototype:");
        console.log(Student.prototype);
        console.log("xiaoming.__proto__ === Student.prototype:" + xiaoming.__proto__ === Student.prototype);
        console.log("Student.prototype.constructor:" + Student.prototype.constructor);
        console.log("Student.prototype.prototype:" + Student.prototype.prototype);
        console.log("Student.prototype.__proto__:");
        console.log(Student.prototype.__proto__);
        console.log(Object.prototype);
        console.log("Student.prototype.__proto__ === Object.prototype:" + Student.prototype.__proto__ === Object.prototype);
    }
}
复制代码

七个红色箭头指向的就是七个console.log语句的输出结果。用图例展示一下如图所示:

测试表明Object.prototype和Student.prototype.__proto__指向的Object并不是同一个。
这个Object就是之前说的没有原型的那个Object,我们可以看到它并没有对应的prototype或者__proto__属性:

由图可得原型链如下所示:

借鉴,学习。。。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值