vue2 源码学习,this直接获取data、methods

80 阅读1分钟

原地址:juejin.cn/post/701092…

知识点整理:

  1. Object.defineProperty 定义对象属性
value——当试图获取属性时所返回的值。
writable——该属性是否可写。
enumerable——该属性在for in循环中是否会被枚举。
configurable——该属性是否可被删除。
set()——该属性的更新操作所调用的函数。
get()——获取属性值时所调用的函数。

function proxy (target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter () { 
    return this[sourceKey][key] 
}; 
sharedPropertyDefinition.set = function proxySetter (val) { 
    this[sourceKey][key] = val; 
}; 
Object.defineProperty(target, key, sharedPropertyDefinition); }

**`Object.defineProperty()`**  静态方法会直接在一个对象上定义一个新属性,或修改其现有属性,并返回此对象。
const object1 = {};
// 例如:
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false,
});

object1.property1 = 77;
// Throws an error in strict mode

console.log(object1.property1); // 42

  1. hasOwn 是否是对象本身拥有的属性
    /**
   * Check whether an object has the property.
   */
    var hasOwnProperty = Object.prototype.hasOwnProperty;
    function hasOwn (obj, key) {
      return hasOwnProperty.call(obj, key)
    }

    hasOwn({ a: undefined }, 'a') // true
    hasOwn({}, 'a') // false
    hasOwn({}, 'hasOwnProperty') // false
    hasOwn({}, 'toString') // false
    // 是自己的本身拥有的属性,不是通过原型链向上查找的。

  1. isReserved 是否是内部私有保留的字符串$ 和 _ 开头
/** * Check if a string starts with $ or _ */ 
function isReserved (str) { 
    var c = (str + '').charCodeAt(0); return c === 0x24 || c === 0x5F 
} 
isReserved('_data'); // true 
isReserved('$options'); // true 
isReserved('data'); // false 
isReserved('options'); // false

4.判断是否是object

var _toString = Object.prototype.toString;
function isPlainObject (obj) {
    return _toString.call(obj) === '[object Object]'
}
function isRegExp (v) {
    return _toString.call(v) === '[object RegExp]'
}