技术文章 | Technical articles

web前端开发源码笔记_ES5 第二天(下午)

二、对象的拓展

2.1 特性

对象是什么,我们用属性来描述

属性是什么, 我们用特性来描述

特性是用来描述属性的

2.2 Object.defineProperty

作用: 用于设置单个属性的特性

使用方式:

Object.defineProperty(obj, property, options)

obj: 要设置的对象

property: 设置的属性

options: 描述特性对象

 

举例:

在没有设置特性之前:

// Es5

var obj = {

 color: "red",

 width: 100

}

//使用for循环

for (var i in obj) {

 console.log(i);

10  }

 

结果:

图片1.png

 

在设置了特性之后:

// Es5

var obj = {

color: "red",

width: 100

}

// 定义特性

Object.defineProperty(obj, "color", {

// 修改可枚举性

10  enumerable: false

11 })

12 

13 

14 //使用for循环

15 for (var i in obj) {

16  console.log(i);

17 }

 

结果:

图片2.png


2.3 特性--配置值

使用方式:

Object.defineProperty(obj, property, {

value:“”

})

 

举例:

// ES5

var obj = {

color: "red"

}

// 定义特性

Object.defineProperty(obj, "color", {

// 配置值

value: "green"

10 })

11 

12 console.log(obj);

 

如果一个对象中,存在该属性,此时描述特性对象中的其他属性默认都是true

如果一个对象中,没有属性而是通过定义特性的方式添加的属性,那么描述特性对象中的其他属性默认全部是false

 

2.4 特性--可修改性

使用方式:

Object.defineProperty(obj, property, {

writable: false  // 将可修改性设为false

})

举例:

// ES5

var obj = {

color: "red"

}

// 定义特性

Object.defineProperty(obj, "color", {

// 不可写入

// writable: false

10  writable: true

11 })

12 

13 // 尝试修改obj.color

14 obj.color = "blue";

15 console.log(obj);

 

设置特性之后将不可修改:

13 图片3.png

 

2.5 特性--可枚举性

使用方式:

Object.defineProperty(obj, property, {

enumerable: false  // 将可枚举性改为false

})

 

举例:

16 // ES5

17 var obj = {

18  color: "red",

19  width: 200

20 }

21 

22 // 默认情况下可以被枚举的

23 // for (var i in obj) {

24 // console.log(i, obj[i]);

25 // }

26 

27 // 定义特性

28 Object.defineProperty(obj, "color", {

29  // 修改可枚举性

30  enumerable: false

31  // enumerable: true

32 })

33 

34 

35 // 再次使用for循环

36 for (var i in obj) {

37  console.log(i, obj[i]);

38 }

图片4.png 

2.6 特性--可配置性

使用方式:

Object.defineProperty(obj, property, {

configurable: false  // 将可配置性改为false

})

 

举例:

14 // ES5

15 var obj = {

16  color: "red",

17  width: 200

18 }

19 

20 // 定义特性

21 Object.defineProperty(obj, "color", {

22  value: "blue",

23  // 不可写入

24  writable: false,

25  // 不可配置

26  configurable: false

27 })

28 

29 // 再次配置

30 Object.defineProperty(obj, "color", {

31  value: "pink",

32  // 不可写入

33  writable: true,

34 })

35 

36 // 尝试修改obj.color

37 obj.color = "green";

38 console.log(obj);

 

修改可配置性为false之后:

39 图片5.png

 

2.7 特性方法

get用来获取属性值的

没有参数

返回值就是要获取的属性值

作用域是当前对象

千万不要在该方法中获取属性值,否则会递归死循环

通常我们获取该属性的一个备用值

set用来设置值的

参数就是要设置的值

没有返回值

作用域是当前对象

千万不要在该方法中,设置属性值

通常我们设置该属性的一个备用属性

 

举例:

39 // 定义对象

40 var obj = {

41  color: "red"

42 }

43 

44 // 设置特性

45 // 一旦设置了特性方法(set, get),当obj.color; 就会触发get函数, 当obj.color = xx; 就会触发set函数

46 Object.defineProperty(obj, "color", {

47  // 取值器

48  get: function() {

49   console.log(111, this, arguments);

50   // 千万不要在方法中获取该属性

51   // return this.color;

52   // 获取该属性的备用值

53   return this._color;

54  },

55  // 赋值器

56  set: function(value) {

57   console.log(222, this, arguments);

58   // 千万不要设置该属性值

59   // this.color = value;

60   // 设置该属性的备用值

61   this._color = value;

62  }

63 })

64 

65 obj.color = "blue";

66 console.log(obj.color);

 

2.8 设置多个属性特性

使用方式:

Object.defineProperties(obj, options)

obj: 要设置的对象

options: 特性对象

key: 特性属性

value: 属性特性对象

设置特性属性和方法

举例:

40 // 定义colornum的特性

41 Object.defineProperties(obj, {

42  color: {

43   //

44   value: "blue",

45   // 不可写入

46   writable: false,

47   // 不可枚举

48   enumerable: false

49  },

50  num: {

51   // 取值器

52   get: function() {

53    return this._num;

54   },

55   set: function(value) {

56    this._num = value;

57   },

58   // 不可枚举

59   enumerable: false,

60   // 一旦设置了特性方法(set, get), 将无法再次配置writable, value

61   // 不可写入

62   // writable: false,

63   // 配置值

64   // value: 300

65  }

66 })

 

三、 原型方法

ES5为原型拓展了几个方法

1.1 isPrototypeOf

原型对象的方法

用于判断原型对象是否是参数对象的原型

参数就是实例化对象

在查找的时候,会查找整个原型链

 

67 // 获取所有div

68 var obj = document.getElementsByTagName("div");

69 // 定义数组

70 var arr = [];

71 

72 // 数组的原型是哪个对象的原型呢?

73 console.log(Array.prototype.isPrototypeOf(obj));

74 console.log(Array.prototype.isPrototypeOf(arr));

75 // 在查找原型的时候,会查找整个原型链

76 console.log(Object.prototype.isPrototypeOf(obj));

77 console.log(Object.prototype.isPrototypeOf(arr));

 

1.2 getPrototypeOf

是对象的静态方法

用于获取原型对象

ES5之前,获取原型对象的方式,__proto__来获取原型对象, 以__开头,在ES5中不推荐使用, 所以提供了getPrototypeOf方法

 

67 // 获取arr的原型对象

68 console.log(arr.__proto__);

69 console.log(Object.getPrototypeOf(arr));

70 console.log(arr.__proto__ === Object.getPrototypeOf(arr));

输出:

78 图片6.png

 

1.3 setPrototypeOf

作用: 设置某一对象的原型对象(可以是一个对象也可以是null

使用方式:

Object.setPrototypeOf(obj, prototype)

obj: 将被设置原型的对象

prototype: 新的原型对象 (可以是一个对象也可以是null

 

71 // 设置arr新的原型对象

72 // 会修改整个原型链

73 // Object.setPrototypeOf(arr, null);

74 Object.setPrototypeOf(arr, {"name": "laowang"});

75 console.log(Object.getPrototypeOf(arr));

 

四、对象的拓展

4.1 Object.preventExtensions

作用: 用于取消对象的可拓展性

举例:

79 // 定义对象

80 var obj = {

81  a: 1

82 }

83 // 对象默认是可以拓展了

84 obj.b = 2;

85 

86 

87 // 取消对象的可拓展性

88 Object.preventExtensions(obj);

89 

90 // 尝试添加属性

91 obj.c = 3;

92 console.log(obj);

93 // 结果,添加失败, 原因就是取消了对象的可拓展性

 

总结:

当取消了对象的可拓展性, 仍然可以修改属性值, 删除属性

查看对象是否取消可拓展性:

Object.isExtensible(obj)  返回 true | false

 

76 

77 // 查看对象的可拓展性是否被取消

78 console.log(Object.isExtensible(obj));

 

4.2 Object.seal

作用: 用于封闭对象

 

举例:

// 定义对象

var obj = {

a: 1

}

// 封闭对象

Object.seal(obj);

 

总结:

封闭之后 对象可以被访问, 不能拓展, 不能删除属性, 可以修改属性值

 

查看对象是否被封闭

  Object.isSelead(obj)  返回 true | false

 

4.3 Object.freeze 

作用: 冻结对象

举例:

// 定义对象

var obj = {

a: 1

}

// 冻结对象

Object.freeze(obj);

// 添加属性

10 obj.b = 2;

11 // 修改属性值

12 obj.a = 111;

13 // 删除属性

14 delete obj.a

15 

16 console.log(obj);

输出:

图片7.png

总结:

当对象冻结以后: 不能添加属性, 不能修改属性值, 不能删除属性

查看对象是否冻结:

Object.isFrozen(obj)  返回 true | false

 

 

4.4 对象创建的新方式

使用方式:

Object.create(prorotype,  options)

接受两个参数:

第一个参数是一个对象(可以设置为null

该对象是Object.create创建出来的原型对象

第二个参数是一个对象(可省略)

该对象是Object.create创建出来的特性对象

举例:

// 创建原型对象

var prototype = {

say: function() {

 console.log("say");

},

sayHello: function() {

 console.log("sayHello");

},

sayNihao: function() {

10   console.log("sayNihao");

11  }

12 }

13 

14 // 特性对象

15 var options = {

16  color: {

17   //

18   value: "red",

19   // 不可写入

20   writable: false

21  },

22  num: {

23   //

24   value: 200,

25   // 不可枚举

26   enumerable: false

27  }

28 }

29 

30 var obj = Object.create(prototype, options);

 

输出:

图片8.png





扫描下方二维码添加微信:haomei0452,领取 前端资料、学费优惠 !



爱创课堂是一家专门做前端培训的机构,由百度高级工程师,《JavaScript设计模式》作者张容铭老师亲自授课,全程20个项目实战,真正做到学习完即可到企业正常工作!

 
我们前端课程的五大优势:

 
1. 名师亲自授课,根据企业需求 实时跟进课程大纲,保证学员学到的都是最新的、企业最需要的前端知识点
 
2. 采取小班教学、上二休一的模式(一个班20—30人,保证老师可以照顾到每一位同学,学员有充足的时间练习

3. 签订就业协议,帮助学员制作简历,投递简历,模拟面试,不用担心就业问题,目前学员平均就业薪资12K

4. 免费学习一周,不满意不收取任何费用

5. 与中国石油,中国电信,软通等知名企业合作,进行企业内训,并进行学员就业推荐

上一篇文章: 学完html+css就可以做的前端项目实战
下一篇文章: web前端开发源码笔记_大数据与git(上午)

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>