JS原型与原型链

WindrunnerMax

发布于 2020-08-27 00:53:07

1.7K0

发布于 2020-08-27 00:53:07

文章被收录于专栏：Czy‘s Blog

原型与原型链

JavaScript有着七种基本类型String、Number、Boolean、Null、Undefined、Symbol、Object，前六种为基本数据类型，Object为引用类型。函数本质上是Object类型，也就是一个对象。

值得注意的是typeof (null)会返回Object，这是因为JS二进制前三位都为0的话会被判断为Object类型，null的二进制表示是全0，自然前三位也是0，所以执行typeof时会返回Object，实际null为基本数据类型。

构造函数对象

构造一个Student类，实例化Student出stu实例对象

function Student() {}
var stu = new Student();
stu.name = "Ming";
console.log(stu.name) // Ming

prototype

每个函数对象都会有一个prototype属性，prototype就是调用构造函数所创建的那个实例对象的原型，prototype可以让所有对象实例共享它所包含的属性和方法。

function Student() {}
Student.prototype = {
    from: "sdust"
}
var stu1 = new Student();
var stu2 = new Student();

console.log(stu1.from) // sdust
console.log(stu2.from) // sdust

proto

__proto__ 是原型链查询中实际用到的，它总是指向prototype，就是指向构造函数Student的原型对象prototype。例如实例化的stu会使用__proto__向Student的prototype寻找方法或属性。若stu寻找到了调用的方法或属性，则不会使用__proto__寻找原型对象。

function Student() {}
Student.prototype = {
    from: "sdust"
}
var stu = new Student();


console.log(stu.__proto__ === Student.prototype) // true
console.log(stu.from) // sdust

stu.from = "s";
console.log(stu.from) // s

constructor

每个原型都有一个constructor属性指向关联的构造函数Student，实例的constructor指向构造函数Student

function Student() {}
var stu = new Student();

console.log(Student.prototype.constructor === Student) // true
console.log(stu.constructor === Student) // true

原型链

原型链可以简单理解为将原型连成一条链，js每一次获取对象中的属性都是一次查询过程，如果在自有属性中找不到就会去原型对象中查找，如果原型对象中还查不到，就回去原型对象的原型中查找，也就是按照原型链查找，直到查找到原型链的顶端，也就是Object的原型。

function parent() {
    this.parentInfo = "parent";
}

parent.prototype.getParentInfo = function() {
    return this.parentInfo;
};

function child(){
    this.childInfo = "child";
}

parent.prototype.getChildInfo = function() {
    return this.childInfo;
};

child.prototype = new parent();

var instance = new child();

console.log(instance.getChildInfo()); // child
console.log(instance.getParentInfo()); // parent
console.log(instance.parentInfo); // parent
console.log(instance.__proto__ === child.prototype); //true
console.log(instance.__proto__.__proto__ === parent.prototype); //true
console.log(instance.__proto__.__proto__.__proto__ === Object.prototype); //true
console.log(instance.__proto__.__proto__.__proto__.__proto__ === null); //true


// function student(){}
// console.log(student.__proto__ === Function.prototype) // true
// console.log(Function.__proto__ === Function.prototype) // true
// console.log(Object.__proto__ === Function.prototype) // true
// console.log(Object.prototype.__proto__ === null) // true

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-03-24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度