Object's prototype object

obj.xxx();

When calling a method of an object, first find the method in the object itself, if it has the method, the call is successful, if not, continue to search for the method along the prototype chain composed of __proto__, if it reaches the prototype chain If the end point is not found, an error will be reported.

Object.prototype.constructor
Object.prototype.toString()
Object.prototype.toLocaleString()
Object.prototype.hasOwnProperty()
Object.prototype.isPrototypeOf()

var obj = { name: '李煜', age: 30, run: () => { console.log('running'); }, };
obj.run();
console.log(obj.toString());

Determine whether a property exists on the object
1. hasOwnProperty() will not search along the prototype chain (only search on the object itself) when determining whether a property exists on the object

var obj = { name: '李煜', age: 30, run: () => { console.log('running'); }, };
if (obj.hasOwnProperty('toString')) {
    // if( 'toString' in obj ){
    console.log('在obj身上');
} else {
    console.log('不在obj身上');
}

2. When in judges whether an attribute exists on the object, it will search along the prototype chain

var obj = { name: '李煜', age: 30, run: () => { console.log('running'); }, };
//if (obj.hasOwnProperty('toString')) {
  if( 'toString' in obj ){
    console.log('在obj身上');
} else {
    console.log('不在obj身上');
}

isPrototypeOf() Determines whether an object is the prototype object of a certain function
Conclusion: Any object in js can be regarded as an instance object of the top-level constructor of Object

var obj = { name: '李煜', age: 30, run: () => { console.log('running'); }, };
if( Array.prototype.isPrototypeOf( Object ) ){
// if (Object.prototype.isPrototypeOf(RegExp)) {
    console.log('是');
} else {
    console.log('不是');
}

var obj = { name: '李煜', age: 30, run: () => { console.log('running'); }, };
// if( Array.prototype.isPrototypeOf( Object ) ){
if (Object.prototype.isPrototypeOf(RegExp)) {
    console.log('是');
} else {
    console.log('不是');
}

var obj = { name:'李煜',age:30, father:{ name:'',age:90, son:{name:'',age:10} } };
console.log( obj );

Object.defineProperty(obj, 'name', { 
    // writable:true,
    set: function( newValue ){  //在set函数中不能 执行针对该属性的赋值操作,会导致函数的递归调用.
        console.log('修改了name属性的值',newValue); 
    },
    get: function(){  //在get函数中不能 执行获取该属性的操作, 会导致函数的递归调用.
        console.log('获取了name属性的值');
        return '李煜'+'!!!';
    },
})

Monitor all properties of the object
Idea:
1. Use for in to traverse the object first, and get each property of the object
2. Use Object.defineProperty to set the monitor for each property of the object

作用: 传入一个对象, 对该对象的每个属性进行遍历并且监听.
function listenObj(obj){
    for(var key in obj){
        if( typeof obj[key] == 'object' ){ //如果某个属性是引用类型, 则递归遍历该属性
            listenObj(obj[key]) //递归遍历该属性
        }else{ //不是引用类型
            Object.defineProperty(obj, key , {
                set:()=>{ console.log('修改了属性的值');  },
                get:()=>{ console.log('获取了属性的值'); }
            })
        }
    }
}

listenObj(obj)

Proxy

var obj = { name: '李玉', age: 0, father: { name: '', age: 10 }, list: [] }
// new Proxy(对象, { set,get })  实现了对象的整体监听, 不需要再写循环遍历+递归调用
// new Proxy 本质是对原有对象进行了一层包装, 生成一个新的包装对象, 这个包装对象实现了对象的监(并不是直接对原有对象进行监听 )
// oobj 是原有对象obj的 代理对象
console.log(obj);
var oobj = new Proxy(obj, {
    set: (a, b, c) => { console.log('修改了obj对象', a, b, c) },
    get: (a, b, c) => { console.log('获取了obj对象', a, b, c) }
})

Object's prototype object

Guess you like