欢迎光临散文网 会员登陆 & 注册

JS:getOwnPropertyDescriptor,defineProperty,数据属性,访问器属性【诗书画唱】

2021-04-09 22:31 作者:诗书画唱  | 我要投稿

本期重点:

视频记录

面试题:严格模式出现的变化


以下作业在严格模式下完成:

1、创建一个猫对象,通过defineProperty给它定义name数据属性,值为大黄,不可修改,

可枚举可配置,color数据属性,值为黄色,可修改可枚举可配置,weight访问器属性,可枚举可配置。

2、创建一个学生stu对象,通过defineProperty定义一个score访问器属性,当运行stu.score = 5;时打印出'成绩进步了5分',当运行var s = stu.score;时打印出‘成绩是95分’

3、创建一个car对象,通过defineProperty定义一个price访问器属性,当运行car.price = 9;时打印出'售车打9折',当运行var p = car.price;时打印出‘价格是999999元’



让你深入了解对象的课堂代码例子


单词:

getOwnPropertyDescriptor要分成get, Own ,Property ,Descriptor来理解意思,其实我很多代码等等都是通过我凭借一己之力探索出来的原创首发的“拆分理解法”:

结合其用法后我理解getOwnPropertyDescriptor为:得到自己的属性的描述符(这个意思目前只是个人理解,非通用的专业术语,只是方便我理解和记忆起作用的意思)。


getOwnPropertyDescriptor:获取指定对象的自身属性描述符。

自身属性描述符是指直接在对象上定义(而非从对象的原型继承)的描述符。


const

常数常用释义

英 [ˈkɒnst]美 [ˈkɑːnst]

  • n.

  • 常数




面试经验:其实面试题等等的解答有时对80%就可以,因为有些题目的意思没说清楚,有些要求的实现很繁琐,而出题者没有要我们完全解答出来的意思(当然有时是有这个意思的)。


面试题:


面试题:严格模式出现的变化(在PC网页端CTRL+F这句话,就可以快速查找到这个题的回答内容,这题其实就是叫你说出严格模式出现的变化)



数据属性的四大特性:

1、value:值

2、writable:表示是否可写,默认true,如果为false,则表示当前属性只读,不能修改。

3、enumerable:表示是否为可枚举,默认true,如果为false,则在for...in中不会被遍历。

4、configurable:表示是否为可配置的,默认true,如果为false,则不能够删除修改,而且不能够再改回true。





这里发生了覆盖,b这时弹出来的内容也是[Object object]

个人推荐的原创首发好方法:把能代入地就代入地来分析。



视频记录 START


面试题:严格模式出现的变化



视频记录 END

以下作业在严格模式下完成:

1、创建一个猫对象,通过defineProperty给它定义name数据属性,值为大黄,不可修改,

可枚举可配置,color数据属性,值为黄色,可修改可枚举可配置,weight访问器属性,可枚举可配置。

<!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 ='诗书画唱家的可爱的猫';

/*

加了 'use strict'后这句会导致报错,不加'use strict',

如果不把 Object.defineProperty(Cat,'name',{

writable: false

});删除

,其实也改不了Cat.name的值,2者都删除后就可以

修改了*/



/*测试语句:

var c1 = Object.getOwnPropertyDescriptor(Cat,'name');

console.log(c1.value)*/


  

        

            (function(){

            var addWeight= 888;

           

            Object.defineProperty(Cat,'weight',{

            get: function(){

console.log('嘿嘿!看到这句话说明调用了weight的get特征方法哦!');

return '这只可爱的《银魂》中的定春大小的猫咪体重增加成了:'+ addWeight+"kg!";

            },

            set: function(w){

console.log('嘿嘿!调用这句话说明调用了weight的set特征方法哦!');

            addWeight +=w;  

/*这里的w是Cat.weight = 666;中的数值,即为666*/

            }

            });

            })();

             

           Cat.weight = 666;

console.log(Cat.weight);

            

</script>

<body>

</body>

</html>

时:


时:


2、创建一个学生stu对象,通过defineProperty定义一个score访问器属性,当运行stu.score = 5;时打印出'成绩进步了5分',当运行var s = stu.score;时打印出‘成绩是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('成绩进步了'+addscore+"分");

            scoreSum +=addscore;  


            }

,get: function(){


//return '成绩是'+ scoreSum+"分";

console.log('成绩是'+ scoreSum+"分");

            }

            });

            })();

            

   //调用set方法:           

 stu.score = 5;

 

 //调用get方法:

var s = stu.score;

            

</script>

<body>

</body>

</html>



3、创建一个car对象,通过defineProperty定义一个price访问器属性,当运行car.price = 9;时打印出'售车打9折',当运行var p = car.price;时打印出‘价格是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('售车打'+addprice+"折");

            priceSum *=(addprice*0.1);  


            }

,get: function(){


//return '成绩是'+ priceSum+"分";

console.log('价格是'+ priceSum+"元");

            }

            });

            })();

            

   //调用set方法:           

 car.price = 9;

 

 //调用get方法:

var p = car.price;

            

</script>

<body>

</body>

</html>


让你深入了解对象的课堂代码例子 START

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script>

//开启严格模式

'use strict';

//定义一个普通的js对象

var o1 = {};

var o2 = new Object();

//对象包含两种运算符(.和[])

o1.name = 'Tom';

o1.age = 18;

o1.study = function(){};

o1.pet = {};

//name是o1对象的一个数据属性

//age是o1对象的一个数据属性

//获取o1对象中的name属性的四大特征

var at1 = Object.getOwnPropertyDescriptor(o1,'name');

//console.log(at1);

var at2 = Object.getOwnPropertyDescriptor(o1,'age');

//console.log(at2);

//变量必须声明才可以使用

//a = 1;//报错

//不能使用with关键字

//with(o1) {}//报错

//在严格模式下,函数调用模式中的this=undefined

function fn(){

//console.log(arguments.callee);//报错

console.log(this);

}

//fn();//undefined

const num = 36;

//用const关键字定义的变量的值不能够修改

//num = 8;//报错

var stu = {

id: 1,

name: 'Bob',

salary: 8000

};

//获取stu对象的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;//报错

            //属性的可枚举特征

            //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特征设置回true了)

//          Object.defineProperty(stu,'id',{

//          configurable: false

//          });

//          //删除stu的id属性

//          delete stu.id;//报错

//          console.log(stu);

            

            //在匿名函数中给对象添加访问器属性

            (function(){

            var _money = 2433.45;

            //给stu对象添加一个访问器属性,这个属性用来控制_money变量

            Object.defineProperty(stu,'account',{

            get: function(){

            console.log('调用account的get特征方法');

            return '当前账户余额是:' + _money;

            },

            set: function(m){

            console.log('调用account的set特征方法');

            _money += m;   

            }

            });

            })();

            //其实调用了set方法

            stu.account = 1400;

            //其实调用了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>





让你深入了解对象的课堂代码例子 END


JS:getOwnPropertyDescriptor,defineProperty,数据属性,访问器属性【诗书画唱】的评论 (共 条)

分享到微博请遵守国家法律