读Vue源码阅读前必须知道javascript的基础内容
的时候遇到这个东西, 就简单测了一下
1. 原型上定义的get,set会影响实例嘛?
会
function Name() {};
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
}
})
let obj = new Name();
console.log(obj.name); //its Name.prototype
2. 如果实例上定义能够覆盖吗?
不能, 表明原型上的get优先级更高?
function Name() {};
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
}
})
let obj = new Name();
console.log(obj.name); //its Name.prototype
obj.name = 555;
console.log(obj.name); //its Name.prototype
3. 实例上赋值, 会走原型上定义的set吗?
会
function Name() {};
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
},
set: function (val) {
data = val
}
})
let obj = new Name();
console.log(obj.name);//its Name.prototype
obj.name = "555";
console.log(obj.name);// 555
4. 既然是原形上定义的get,set, 实例之间是否会影响?
会, 这就有点懵逼
function Name() {};
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
},
set: function (val) {
data = val
}
})
let obj = new Name();
console.log(obj.name);// its Name.prototype
obj.name = "555";
console.log(obj.name);// 555
let obj2 = new Name();
console.log(obj2.name);// 555
obj2.name = 'its obj2';
console.log(obj2.name);//its obj2
console.log(obj.name);//its obj2
5. 到这里, 就是第一个跟以前的常识大不相同了
之前的常识是,
子可以访问获取父,
但同时, 子可以覆盖父,(所谓的继承和多态性的基础?)
间接说明, 子和子之间是不会互相影响的.
但是按照上面的代码结果, 则表示
每个实例无法覆盖, 且子与子之间是会互相影响的.
换个角度去思考
表明, 子与子之间, 可以有互相传递数据的通道了?
下面是把obj.a 通过原型的name, 传递给obj2.b, 关键是, obj和obj2是两个实例
obj.a = 'i am obj.a';
obj2.b = 'i am obj.b';
obj.name = obj.a;// 传递
console.log(obj.name);//i am obj.a
console.log(obj2.name);////i am obj.a
console.log(obj.a);//i am obj.a
console.log(obj2.b);//i am obj.b
obj2.b = obj2.name;
console.log(obj2.b);//i am obj.a
6. 子上定义的get 能否覆盖父的get?
能, 表明, 想要覆盖原型上的get, 只能用实例上的get?
function Name() { };
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
},
set: function (val) {
data = val
}
})
let obj = new Name();
console.log(obj.name);// its Name.prototype
obj.name = "555";
console.log(obj.name);// 555
let obj2 = new Name();
console.log(obj2.name);// 555
let str = "its another obj";
Object.defineProperty(obj, 'name', {
get: function () {
return str
},
set: function (val) {
str += val
}
})
console.log(obj.name);// its another obj
obj.name = "999";
console.log(obj.name);// its another obj 999
console.log(obj2.name);// 555
7. 如果, 子上只定义get, 没定义set会怎么样?
还是会覆盖父级的set, 相当于用一个空set进行了覆盖.
表明get,set是成对走的?
function Name() { };
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
},
set: function (val) {
data = val
}
})
let obj = new Name();
console.log(obj.name);// its Name.prototype
obj.name = "555";
console.log(obj.name);// 555
let obj2 = new Name();
console.log(obj2.name);// 555
let str = "its another obj";
Object.defineProperty(obj, 'name', {
get: function () {
return str
}
})
console.log(obj.name);// its another obj
obj.name = "999";
console.log(obj.name);// its another obj
console.log(obj2.name);// 555
8. 咦? 继续往下读发现子还是可以覆盖父级的get的?
表明: 关键不在于只能get覆盖get,
defineProperty定义的优先级会更高?
父上defineProperty定义的只能通过子的defineProperty进行覆盖?
function Name() { };
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
get: function () {
return data
},
set: function (val) {
data = val
}
})
let obj = new Name();
Object.defineProperty(obj, 'name', {
value: 100
})
console.log(obj.name);
9. 父用defineProperty, 定义一个value, 子能否用正常属性赋值进行覆盖?
不能! 只能用difineProperty进行覆盖!
function Name() { };
let data = "its Name.prototype";
Object.defineProperty(Name.prototype, 'name', {
value: 100
})
let obj = new Name();
console.log(obj.name);//100
obj.name = 555;
console.log(obj.name);//100
10. defineProperty的优先级比原型链的优先级高?
同样是difineProperty的情况下, 子才会覆盖父?
为什么这么设计?
盗个图
image.png
