关于类,继承,原型,原型链

102 阅读1分钟

1 、没有原型的对象

let ch = {name:'xx'}
console.log(ch.hasOwnProperty('name'))  // true

let child = Object.create(null, {
    // 完全数据字典对象
    name: {
        value: '孤儿对象'
    }
})
console.log(child.hasOwnProperty('name'))  // child.hasOwnProperty is not a function 

3174701-18a76d28c0a9ea1b.webp

2 、prototype 和 _ _ proto_ _

function User() {
};
User.prototype.show = function() {
    console.log('--show')
}
User.__proto__.view = function() {
    console.log('--view')
}

User.view()
User.prototype.__proto__ == User.__proto__.__proto__  // true
console.dir(User);

let hd = new User(); // 构造函数
console.dir(hd);

hd.show() // 只有在User.prototype.show定义之后才显示
// hd.view() // error
// hd.prototype // undefined
hd.__proto__ == User.prototype // true
hd.__proto__.constructor == User // true
hd.__proto__.constructor.view() // 正常

Object.prototype.__proto__  // null
Object.prototype.show = function() {
    console.log('Obj')
}

console.dir(Object);

User.prototype.__proto__.show() // Obj
User.prototype.__proto__ == Object.prototype // true

let xj = new User()
xj.show()

常见的构造函数

let obj = {} // new Object
obj.__proto__ == Object.prototype

let arr = [] // new Array
console.log(arr.__proto__ == Array.prototype)

let str = '' // new String
str.__proto__ == String.prototype

let bool = true // new Boolean
bool.__proto__ == Boolean.prototype

let reg = /a/i // new RegExp
reg.__proto__ == RegExp.prototype

自定义原型 Object.setPrototypeOf()

Object.setPrototypeOf()  静态方法可以将一个指定对象的原型(即内部的 [[Prototype]] 属性)设置为另一个对象或者 null

let hd = {name: "hd"}
let parent = {
    name: "parent",
    show() {
        console.log("p:" + this.name);
    }
};

hd.show();
Object.setPrototypeOf(hd, parent);
hd.show();
parent.show();
console.log(Object.getPrototypeOf(hd));

原型中constructor

function User(name) {
    this.name = name;
}
// 往对象追加属性
// User.prototype.show = function(){
//    console.log(this.name);
// } 

User.prototype = {
    // 重写prototype,原型丢失constructor
    constructor: User,
    show(){
        console.log(this.name);
    }
} 

console.dir(User);
// console.log(User.prototype.__proto__ === Object.prototype);
// console.log(User.prototype.constructor === User);
let lisi = new User.prototype.constructor("LiSi");
console.log(lisi)
lisi.show();
function User(name) {
    this.name = name;
    this.show = function(){
        console.log(this.name);
    } 
}
 
let hd = new User("LiSi")
console.log(hd)

function createByObject(obj, ...args) {
    // 通过对象找到原型的constructor
    const constructor = Object.getPrototypeOf(obj).constructor;
    console.log(constructor === User);
    return new constructor(...args)
}
let xj = createByObject(hd, "xxx");
xj.show()

原型链总结

let arr = [] // new Array
console.log(arr.__proto__.__proto__ === Object.prototype);
console.log(Object.prototype.__proto__ );

let a = { name: "a"};
let c = { name: "c"};
let b = { 
    name: "b",
    show() {
        console.log(this.name)
    }
};
Object.setPrototypeOf(a,b)
Object.setPrototypeOf(c,b)
a.show()
c.show()