JS：getOwnPropertyDescriptor，defineProperty，數(shù)據(jù)屬性，訪問(wèn)器屬性【詩(shī)書(shū)畫(huà)唱】
本期重點(diǎn)：
視頻記錄
面試題：嚴(yán)格模式出現(xiàn)的變化
以下作業(yè)在嚴(yán)格模式下完成：
1、創(chuàng)建一個(gè)貓對(duì)象,通過(guò)defineProperty給它定義name數(shù)據(jù)屬性，值為大黃，不可修改，
可枚舉可配置，color數(shù)據(jù)屬性，值為黃色，可修改可枚舉可配置，weight訪問(wèn)器屬性，可枚舉可配置。
2、創(chuàng)建一個(gè)學(xué)生stu對(duì)象，通過(guò)defineProperty定義一個(gè)score訪問(wèn)器屬性，當(dāng)運(yùn)行stu.score = 5;時(shí)打印出'成績(jī)進(jìn)步了5分'，當(dāng)運(yùn)行var s = stu.score;時(shí)打印出‘成績(jī)是95分’
3、創(chuàng)建一個(gè)car對(duì)象，通過(guò)defineProperty定義一個(gè)price訪問(wèn)器屬性，當(dāng)運(yùn)行car.price = 9;時(shí)打印出'售車(chē)打9折'，當(dāng)運(yùn)行var p = car.price;時(shí)打印出‘價(jià)格是999999元’
讓你深入了解對(duì)象的課堂代碼例子
單詞：
getOwnPropertyDescriptor要分成get， Own ，Property ，Descriptor來(lái)理解意思，其實(shí)我很多代碼等等都是通過(guò)我憑借一己之力探索出來(lái)的原創(chuàng)首發(fā)的“拆分理解法”：
結(jié)合其用法后我理解getOwnPropertyDescriptor為：得到自己的屬性的描述符（這個(gè)意思目前只是個(gè)人理解，非通用的專(zhuān)業(yè)術(shù)語(yǔ)，只是方便我理解和記憶起作用的意思）。
getOwnPropertyDescriptor：獲取指定對(duì)象的自身屬性描述符。
自身屬性描述符是指直接在對(duì)象上定義（而非從對(duì)象的原型繼承）的描述符。
const
常數(shù)常用釋義
英 [?k?nst]美 [?kɑ?nst]
n.
常數(shù)
面試經(jīng)驗(yàn)：其實(shí)面試題等等的解答有時(shí)對(duì)80%就可以，因?yàn)橛行╊}目的意思沒(méi)說(shuō)清楚，有些要求的實(shí)現(xiàn)很繁瑣，而出題者沒(méi)有要我們完全解答出來(lái)的意思（當(dāng)然有時(shí)是有這個(gè)意思的）。
面試題：
面試題：嚴(yán)格模式出現(xiàn)的變化（在PC網(wǎng)頁(yè)端CTRL+F這句話，就可以快速查找到這個(gè)題的回答內(nèi)容，這題其實(shí)就是叫你說(shuō)出嚴(yán)格模式出現(xiàn)的變化）
數(shù)據(jù)屬性的四大特性：
1、value：值
2、writable：表示是否可寫(xiě)，默認(rèn)true，如果為false，則表示當(dāng)前屬性只讀，不能修改。
3、enumerable：表示是否為可枚舉，默認(rèn)true，如果為false，則在for...in中不會(huì)被遍歷。
4、configurable：表示是否為可配置的，默認(rèn)true，如果為false，則不能夠刪除修改，而且不能夠再改回true。
個(gè)人推薦的原創(chuàng)首發(fā)好方法：把能代入地就代入地來(lái)分析。
視頻記錄 START
視頻記錄?END
以下作業(yè)在嚴(yán)格模式下完成：
1、創(chuàng)建一個(gè)貓對(duì)象,通過(guò)defineProperty給它定義name數(shù)據(jù)屬性，值為大黃，不可修改，
可枚舉可配置，color數(shù)據(jù)屬性，值為黃色，可修改可枚舉可配置，weight訪問(wèn)器屬性，可枚舉可配置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
'use strict';
var Cat = {
name: '大黃',
color:'黃色',
weight:666
};
Object.defineProperty(Cat,'name',{
writable: false
});
//Cat.name ='詩(shī)書(shū)畫(huà)唱家的可愛(ài)的貓';
/*
加了 'use strict'后這句會(huì)導(dǎo)致報(bào)錯(cuò)，不加'use strict'，
如果不把 Object.defineProperty(Cat,'name',{
writable: false
});刪除
，其實(shí)也改不了Cat.name的值，2者都刪除后就可以
修改了*/
/*測(cè)試語(yǔ)句：
var c1 = Object.getOwnPropertyDescriptor(Cat,'name');
console.log(c1.value)*/
??
? ? ? ??
? ? ? ? ? ? (function(){
? ? ? ? ? ? var addWeight= 888;
? ? ? ? ? ?
? ? ? ? ? ? Object.defineProperty(Cat,'weight',{
? ? ? ? ? ? get: function(){
console.log('嘿嘿！看到這句話說(shuō)明調(diào)用了weight的get特征方法哦！');
return '這只可愛(ài)的《銀魂》中的定春大小的貓咪體重增加成了：'+ addWeight+"kg!";
? ? ? ? ? ? },
? ? ? ? ? ? set: function(w){
console.log('嘿嘿！調(diào)用這句話說(shuō)明調(diào)用了weight的set特征方法哦！');
? ? ? ? ? ? addWeight +=w;??
/*這里的w是Cat.weight = 666;中的數(shù)值，即為666*/
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? })();
? ? ? ? ? ? ?
? ? ? ? ? ?Cat.weight = 666;
console.log(Cat.weight);
? ? ? ? ? ??
</script>
<body>
</body>
</html>
當(dāng)
時(shí)：
當(dāng)
時(shí)：
2、創(chuàng)建一個(gè)學(xué)生stu對(duì)象，通過(guò)defineProperty定義一個(gè)score訪問(wèn)器屬性，當(dāng)運(yùn)行stu.score = 5;時(shí)打印出'成績(jī)進(jìn)步了5分'，當(dāng)運(yùn)行var s = stu.score;時(shí)打印出‘成績(jī)是95分’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
'use strict';
var stu = {
score:90
};
? ? ? ? ? ? (function(){
? ? ? ? ? ? var scoreSum= 90;
? ? ? ? ? ?
? ? ? ? ? ? Object.defineProperty(stu,'score',{
? ? ? ? ? ?
? ? ? ? ? ? set: function(addscore){
console.log('成績(jī)進(jìn)步了'+addscore+"分");
? ? ? ? ? ? scoreSum +=addscore;??
? ? ? ? ? ? }
,get: function(){
//return '成績(jī)是'+ scoreSum+"分";
console.log('成績(jī)是'+ scoreSum+"分");
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? })();
? ? ? ? ? ??
? ?//調(diào)用set方法：? ? ? ? ? ?
?stu.score = 5;
?
?//調(diào)用get方法：
var s = stu.score;
? ? ? ? ? ??
</script>
<body>
</body>
</html>
3、創(chuàng)建一個(gè)car對(duì)象，通過(guò)defineProperty定義一個(gè)price訪問(wèn)器屬性，當(dāng)運(yùn)行car.price = 9;時(shí)打印出'售車(chē)打9折'，當(dāng)運(yùn)行var p = car.price;時(shí)打印出‘價(jià)格是999999元’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
'use strict';
var car = {
price:9
};
? ? ? ? ? ? (function(){
? ? ? ? ? ? var priceSum=1111110;
? ? ? ? ? ?
? ? ? ? ? ? Object.defineProperty(car,'price',{
? ? ? ? ? ?
? ? ? ? ? ? set: function(addprice){
console.log('售車(chē)打'+addprice+"折");
? ? ? ? ? ? priceSum *=(addprice*0.1);??
? ? ? ? ? ? }
,get: function(){
//return '成績(jī)是'+ priceSum+"分";
console.log('價(jià)格是'+ priceSum+"元");
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? })();
? ? ? ? ? ??
? ?//調(diào)用set方法：? ? ? ? ? ?
?car.price = 9;
?
?//調(diào)用get方法：
var p = car.price;
? ? ? ? ? ??
</script>
<body>
</body>
</html>
讓你深入了解對(duì)象的課堂代碼例子 START
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//開(kāi)啟嚴(yán)格模式
'use strict';
//定義一個(gè)普通的js對(duì)象
var o1 = {};
var o2 = new Object();
//對(duì)象包含兩種運(yùn)算符(.和[])
o1.name = 'Tom';
o1.age = 18;
o1.study = function(){};
o1.pet = {};
//name是o1對(duì)象的一個(gè)數(shù)據(jù)屬性
//age是o1對(duì)象的一個(gè)數(shù)據(jù)屬性
//獲取o1對(duì)象中的name屬性的四大特征
var at1 = Object.getOwnPropertyDescriptor(o1,'name');
//console.log(at1);
var at2 = Object.getOwnPropertyDescriptor(o1,'age');
//console.log(at2);
//變量必須聲明才可以使用
//a = 1;//報(bào)錯(cuò)
//不能使用with關(guān)鍵字
//with(o1) {}//報(bào)錯(cuò)
//在嚴(yán)格模式下，函數(shù)調(diào)用模式中的this=undefined
function fn(){
//console.log(arguments.callee);//報(bào)錯(cuò)
console.log(this);
}
//fn();//undefined
const num = 36;
//用const關(guān)鍵字定義的變量的值不能夠修改
//num = 8;//報(bào)錯(cuò)
var stu = {
id: 1,
name: 'Bob',
salary: 8000
};
//獲取stu對(duì)象的id屬性的四大特征
var attr = Object.getOwnPropertyDescriptor(stu,'id');
//屬性的值特征
console.log(attr.value);
//id屬性的可修改特征
//console.log(attr.writable);
//將id屬性的writable屬性修改為false
Object.defineProperty(stu,'id',{
writable: false
});
console.log(attr.writable);
// stu.id = 5;//報(bào)錯(cuò)
? ? ? ? ? ? //屬性的可枚舉特征
? ? ? ? ? ? //console.log(attr.enumerable);
? ? ? ? ? ? //將salary屬性的enumerable特征修改為false
//? ? ? ? ? Object.defineProperty(stu,'salary',{
//? ? ? ? ? enumerable: false
//? ? ? ? ? });? ? ? ? ? ??
//? ? ? ? ? for(var a in stu) {
//? ? ? ? ? console.log(a + ':' + stu[a]);
//? ? ? ? ? }
? ? ? ? ? ? //屬性的configurable特征
? ? ? ? ? ? //console.log(attr.configurable);
? ? ? ? ? ? //使id屬性不可刪除（不能再次將configurable特征設(shè)置回true了）
//? ? ? ? ? Object.defineProperty(stu,'id',{
//? ? ? ? ? configurable: false
//? ? ? ? ? });
//? ? ? ? ? //刪除stu的id屬性
//? ? ? ? ? delete stu.id;//報(bào)錯(cuò)
//? ? ? ? ? console.log(stu);
? ? ? ? ? ??
? ? ? ? ? ? //在匿名函數(shù)中給對(duì)象添加訪問(wèn)器屬性
? ? ? ? ? ? (function(){
? ? ? ? ? ? var _money = 2433.45;
? ? ? ? ? ? //給stu對(duì)象添加一個(gè)訪問(wèn)器屬性,這個(gè)屬性用來(lái)控制_money變量
? ? ? ? ? ? Object.defineProperty(stu,'account',{
? ? ? ? ? ? get: function(){
? ? ? ? ? ? console.log('調(diào)用account的get特征方法');
? ? ? ? ? ? return '當(dāng)前賬戶(hù)余額是：' + _money;
? ? ? ? ? ? },
? ? ? ? ? ? set: function(m){
? ? ? ? ? ? console.log('調(diào)用account的set特征方法');
? ? ? ? ? ? _money += m;? ?
? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? })();
? ? ? ? ? ? //其實(shí)調(diào)用了set方法
? ? ? ? ? ? stu.account = 1400;
? ? ? ? ? ? //其實(shí)調(diào)用了get方法
? ? ? ? ? ? //console.log(stu.account);
? ? ? ? ? ??
? ? ? ? ? ? //面試題講解
? ? ? ? ? ? var a = {};
var b = {key: 'b'};
var c = {name: 'abc'};
var d = [3,5,6];
var e = [1,2,3];
a[d] = 1;
a[e] = 2;
</script>
</head>
<body>
</body>
</html>
