资讯专栏INFORMATION COLUMN

《Javascript高级程序设计 (第三版)》第六章 面向对象的程序设计

yy736044583 / 2640人阅读

摘要:把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。组合使用构造函数模式动态原型模式通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

理解对象 属性类型

数据属性
数据属性包含一个数据值的位置。在这个位置可以读取和写入值。数据属性有 4 个描述其行为的特性。

</>复制代码

  1. [[Configurable]] :表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特
  2. 性,或者能否把属性修改为访问器属性。像前面例子中那样直接在对象上定义的属性,它们的
  3. 这个特性默认值为 true
  4. [[Enumerable]] :表示能否通过 for-in 循环返回属性。像前面例子中那样直接在对象上定
  5. 义的属性,它们的这个特性默认值为 true
  6. [[Writable]] :表示能否修改属性的值。像前面例子中那样直接在对象上定义的属性,它们的
  7. 这个特性默认值为 true
  8. [[Value]] :包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,
  9. 把新值保存在这个位置。这个特性的默认值为 undefined
  10. var person = {};
  11. Object.defineProperty(person, "name", {
  12. writable: false,
  13. value: "Nicholas"
  14. });
  15. alert(person.name); //"Nicholas"
  16. person.name = "Greg";
  17. alert(person.name); //"Nicholas"
  18. 一旦把属性定义为不可配置的,就不能再把它变回可配置了。
  19. var person = {};
  20. Object.defineProperty(person, "name", {
  21. configurable: false,
  22. value: "Nicholas"
  23. });
  24. alert(person.name); //"Nicholas"
  25. delete person.name;
  26. alert(person.name); //"Nicholas"

访问器属性
访问器属性不包含数据值;它们包含一对儿 getter 和 setter 函数(不过,这两个函数都不是必需的)。在读取访问器属性时,会调用 getter 函数,这个函数负责返回有效的值;在写入访问器属性时,会调用setter 函数并传入新值,这个函数负责决定如何处理数据。(只指定其中get或者set意味着属性是不能写,尝试写入属性会被忽略。)

</>复制代码

  1. [[Configurable]] :表示能否通过 delete 删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为数据属性。对于直接在对象上定义的属性,这个特性的默认值为true
  2. [[Enumerable]] :表示能否通过 for-in 循环返回属性。对于直接在对象上定义的属性,这个特性的默认值为 true
  3. [[Get]] :在读取属性时调用的函数。默认值为 undefined
  4. [[Set]] :在写入属性时调用的函数。默认值为 undefined
  5. var book = {
  6. _year: 2004,
  7. edition: 1
  8. };
  9. Object.defineProperty(book, "year", {
  10. get: function(){
  11. return this._year;
  12. },
  13. set: function(newValue){
  14. if (newValue > 2004) {
  15. this._year = newValue;
  16. this.edition += newValue - 2004;
  17. }
  18. }
  19. });
  20. book.year = 2005;
  21. alert(book.edition); //2
定义多个属性

Object.defineProperties()

</>复制代码

  1. var book = {};
  2. Object.defineProperties(book, {
  3. _year: {
  4. value: 2004
  5. },
  6. edition: {
  7. value: 1
  8. },
  9. year: {
  10. get: function(){
  11. return this._year;
  12. },
  13. set: function(newValue){
  14. if (newValue > 2004) {
  15. this._year = newValue;
  16. this.edition += newValue - 2004;
  17. }
  18. }
  19. }
  20. });
读取属性的特性

Object.getOwnPropertyDescriptor()
可以取得给定属性的描述符。

</>复制代码

  1. var book = {};
  2. Object.defineProperties(book, {
  3. _year: {
  4. value: 2004
  5. },
  6. edition: {
  7. value: 1
  8. },
  9. year: {
  10. get: function(){
  11. return this._year;
  12. },
  13. set: function(newValue){
  14. if (newValue > 2004) {
  15. this._year = newValue;
  16. this.edition += newValue - 2004;
  17. }
  18. }
  19. }
  20. });
  21. var descriptor =Object.getOwnPropertyDescriptor(book,"_year");
  22. alert(descriptor.value); //2004
  23. alert(descriptor.configurable); //false
  24. alert(typeof descriptor.get); //"undefined"
  25. var descriptor =Object.getOwnPropertyDescriptor(book, "year");
  26. alert(descriptor.value); //undefined
  27. alert(descriptor.enumerable); //false
  28. alert(typeof descriptor.get); //"function"
创建对象 工厂模式

</>复制代码

  1. 用函数来封装以特定接口创建对象的细节构造函数模式
    缺陷:没有解决对象识别的问题

</>复制代码

  1. function createPerson(name, age, job){
  2. var o = new Object();
  3. o.name = name;
  4. o.age = age;
  5. o.job = job;
  6. o.sayName = function(){
  7. alert(this.name);
  8. };
  9. return o;
  10. }
  11. var person1 = createPerson("Nicholas", 29, "Software Engineer");
  12. var person2 = createPerson("Greg", 27, "Doctor");
构造函数模式

</>复制代码

  1. function Person(name, age, job){
  2. this.name = name;
  3. this.age = age;
  4. this.job = job;
  5. this.sayName = function(){
  6. alert(this.name);
  7. };
  8. }
  9. var person1 = new Person("Nicholas", 29, "Software Engineer");
  10. var person2 = new Person("Greg", 27, "Doctor");"

将构造函数当作函数

</>复制代码

  1. // 当作构造函数使用
  2. var person = new Person("Nicholas", 29, "Software Engineer");
  3. person.sayName(); //"Nicholas"
  4. // 作为普通函数调用
  5. Person("Greg", 27, "Doctor"); // 添加到 window
  6. window.sayName(); //"Greg"
  7. // 在另一个对象的作用域中调用
  8. var o = new Object();
  9. Person.call(o, "Kristen", 25, "Nurse");
  10. o.sayName(); //"Kristen"

构造函数的问题
每个方法都要在每个实例上重新创建一遍。

</>复制代码

  1. function Person(name, age, job){
  2. this.name = name;
  3. this.age = age;
  4. this.job = job;
  5. this.sayName = new Function("alert(this.name)"); // 与声明函数在逻辑上是等价的
  6. }
  7. alert(person1.sayName == person2.sayName); //false
原型模式

</>复制代码

  1. 每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。

</>复制代码

  1. function Person(){};
  2. Person.prototype.name = "Nicholas";
  3. Person.prototype.age = 29;
  4. Person.prototype.job = "Software Engineer";
  5. Person.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. var person1 = new Person();
  9. person1.sayName(); //"Nicholas"
  10. var person2 = new Person();
  11. person2.sayName(); //"Nicholas"
  12. alert(person1.sayName == person2.sayName); //true

对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。

</>复制代码

  1. function Person(){}
  2. var friend = new Person();
  3. Person.prototype = {
  4. constructor: Person,
  5. name : "Nicholas",
  6. age : 29,
  7. job : "Software Engineer",
  8. sayName : function () {
  9. alert(this.name);
  10. }
  11. };
  12. friend.sayName(); //error
组合使用构造函数模式

</>复制代码

  1. function Person(name, age, job){
  2. this.name = name;
  3. this.age = age;
  4. this.job = job;
  5. this.friends = ["Shelby", "Court"];
  6. }
  7. Person.prototype = {
  8. constructor : Person,
  9. sayName : function(){
  10. alert(this.name);
  11. }
  12. }
  13. var person1 = new Person("Nicholas", 29, "Software Engineer");
  14. var person2 = new Person("Greg", 27, "Doctor");
  15. person1.friends.push("Van");
  16. alert(person1.friends); //"Shelby,Count,Van"
  17. alert(person2.friends); //"Shelby,Count"
  18. alert(person1.friends === person2.friends); //false
  19. alert(person1.sayName === person2.sayName); //true
动态原型模式

</>复制代码

  1. 通过检查某个应该存在的方法是否有效,来决定是否需要初始化原型。

</>复制代码

  1. function Person(name, age, job){
  2. //属性
  3. this.name = name;
  4. this.age = age;
  5. this.job = job;
  6. // 方法
  7. if (typeof this.sayName != "function"){
  8. Person.prototype.sayName = function(){
  9. alert(this.name);
  10. };
  11. }
  12. }
  13. var friend = new Person("Nicholas", 29, "Software Engineer");
  14. friend.sayName();
寄生构造函数模式

</>复制代码

  1. 创建一个函数,该函数的作用仅仅是封装创建对象的代码,然后再返回新创建的对象

</>复制代码

  1. function Person(name, age, job){
  2. var o = new Object();
  3. o.name = name;
  4. o.age = age;
  5. o.job = job;
  6. o.sayName = function(){
  7. alert(this.name);
  8. };
  9. return o;
  10. }
  11. var friend = new Person("Nicholas", 29, "Software Engineer");
  12. friend.sayName(); //"Nicholas"
稳妥构造函数模式

</>复制代码

  1. 没有公共属性,而且其方法也不引用 this 的对象。稳妥对象最适合在一些安全的环境中(这些环境中会禁止使用 thisnew ),或者在防止数据被其他应用程序(如 Mashup程序)改动时使用。

</>复制代码

  1. function Person(name, age, job){
  2. //创建要返回的对象
  3. var o = new Object();
  4. //可以在这里定义私有变量和函数
  5. //添加方法
  6. o.sayName = function(){
  7. alert(name);
  8. };
  9. //返回对象
  10. return o;
  11. }
继承

依靠原型链来实现

原型链

</>复制代码

  1. function SuperType(){
  2. this.colors = ["red", "blue", "green"];
  3. }
  4. function SubType(){}
  5. //继承了 SuperType
  6. SubType.prototype = new SuperType();
  7. var instance1 = new SubType();
  8. instance1.colors.push("black");
  9. alert(instance1.colors); //"red,blue,green,black"
  10. var instance2 = new SubType();
  11. alert(instance2.colors); //"red,blue,green,black"
借用构造函数

</>复制代码

  1. function SuperType(){
  2. this.colors = ["red", "blue", "green"];
  3. }
  4. function SubType(){
  5. // 继承了 SuperType
  6. SuperType.call(this);
  7. }
  8. var instance1 = new SubType();
  9. instance1.colors.push("black");
  10. alert(instance1.colors); //"red,blue,green,black"
  11. var instance2 = new SubType();
  12. alert(instance2.colors); //"red,blue,green"
组合继承

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors = ["red", "blue", "green"];
  4. }
  5. SuperType.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. function SubType(name, age){
  9. //继承属性
  10. SuperType.call(this, name);
  11. this.age = age;
  12. }
  13. //继承方法
  14. SubType.prototype = new SuperType();
  15. SubType.prototype.constructor = SubType;
  16. SubType.prototype.sayAge = function(){
  17. alert(this.age);
  18. };
  19. var instance1 = new SubType("Nicholas", 29);
  20. instance1.colors.push("black");
  21. alert(instance1.colors); //"red,blue,green,black"
  22. instance1.sayName(); //"Nicholas";
  23. instance1.sayAge(); //29
  24. var instance2 = new SubType("Greg", 27);
  25. alert(instance2.colors); //"red,blue,green"
  26. instance2.sayName(); //"Greg";
  27. instance2.sayAge(); //27
原型式继承

</>复制代码

  1. var person = {
  2. name: "Nicholas",
  3. friends: ["Shelby", "Court", "Van"]
  4. };
  5. var anotherPerson = Object.create(person);
  6. anotherPerson.name = "Greg";
  7. anotherPerson.friends.push("Rob");
  8. var yetAnotherPerson = Object.create(person);
  9. yetAnotherPerson.name = "Linda";
  10. yetAnotherPerson.friends.push("Barbie");
  11. alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
寄生组合式继承

</>复制代码

  1. function SuperType(name){
  2. this.name = name;
  3. this.colors = ["red", "blue", "green"];
  4. }
  5. SuperType.prototype.sayName = function(){
  6. alert(this.name);
  7. };
  8. function SubType(name, age){
  9. //继承属性
  10. SuperType.call(this, name);
  11. this.age = age;
  12. }
  13. //继承方法
  14. SubType.prototype =SuperType.prototype;
  15. SubType.prototype.constructor = SubType;
  16. SubType.prototype.sayAge = function(){
  17. alert(this.age);
  18. };
  19. var instance1 = new SubType("Nicholas", 29);
  20. instance1.colors.push("black");
  21. alert(instance1.colors); //"red,blue,green,black"
  22. instance1.sayName(); //"Nicholas";
  23. instance1.sayAge(); //29
  24. var instance2 = new SubType("Greg", 27);
  25. alert(instance2.colors); //"red,blue,green"
  26. instance2.sayName(); //"Greg";
  27. instance2.sayAge(); //27

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89816.html

相关文章

  • 如果想成为一名顶尖前端,这份书单你一定要收藏!

    摘要:其中负载均衡那一节,基本上是参考的权威指南负载均衡的内容。开发指南读了一半,就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍...

    callmewhy 评论0 收藏0
  • 如果想成为一名顶尖前端,这份书单你一定要收藏!

    摘要:其中负载均衡那一节,基本上是参考的权威指南负载均衡的内容。开发指南读了一半,就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队 发表于云+社区专栏作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍...

    Scliang 评论0 收藏0
  • 如果想成为一名顶尖前端,这份书单你一定要收藏!

    摘要:其中负载均衡那一节,基本上是参考的权威指南负载均衡的内容。开发指南读了一半,就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏 作者:link 2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍。...

    233jl 评论0 收藏0
  • javascript高级程序设计六章 读书笔记 之 javascript对象几种创建方式

    摘要:三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数,其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。 一、工厂模式 工厂模式:使用字面量和object构造函数会有很多重复代码,在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

    xiaotianyi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<