《javascript高级程序设计》笔记:创建对象

news/2024/7/5 5:36:41

1. 简单方式创建对象

  // 字面量方式创建对象
  var person1 = {
    name: "xyc",
    age: 23,
    sayHi: function() {
      console.log(name);
    }
  };
  
  // Object方式创建对象
  var person2 = new Object();
  person2.name = "lxy";
  person2.age = 18;
  person2.sayHi = function() {
    console.log(person2.name);
  }

虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码,如上面的代码,每创建一个类似的person对象,就会重复上面的写法,代码较为冗余

为了解决这个问题(代码重复),下面引入工厂模式 ==>

2. 工厂模式创建对象

  function createPerson(name, age, job){
    var o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
      alert(this.name);
    };
    return o; 
  }
  var person1 = createPerson("Nicholas", 29, "Software Engineer");
  var person2 = createPerson("Greg", 27, "Doctor");

通俗的解释:工厂模式就是利用了函数的封装调用,类比工厂材料==>成品的过程,完成入口参数==>对象的过程,函数可以无数次的生成,因此能够避免上面产生大量重复代码的情况。工厂模式虽然解决了创建多个相似对象的问题,但却没有解决对象识别的问题(即怎样知道一个对象的类型)

为解决这个问题(对象识别),下面引入构造函数模式

3. 构造函数创建对象

3.1 构造函数与普通函数的区别

  1. 命名规则:构造函数一般是首字母大写,普通函数遵照小驼峰式命名法
  2. 函数调用
    构造函数:
    (1)new fn( )
    (2)构造函数内部会创建一个新的对象,即f的实例
    (3)函数内部的this指向 新创建的f的实例
    (4)默认的返回值是f的实例
    普通函数:
    (1)fn( )
    (2)在调用函数的内部不会创建新的对象
    (3)函数内部的this指向调用函数的对象(如果没有对象调用,默认是window)
    (4)返回值由return语句决定
  3. 构造函数的返回值
    有一个默认的返回值,新创建的对象(实例),当手动添加返回值后(return语句):
    (1)返回值是基本数据类型-->真正的返回值还是那个新创建的对象(实例)
    (2)返回值是复杂数据类型(对象)-->真正的返回值是这个对象

    function foo() {
      var f2 = new foo2();
      console.log(f2);    // {a: 3}
      console.log(this);  // window
      return true;
    }
    function foo2() {
      console.log(this);  // foo2类型的对象 不是foo2函数
      return {a: 3};
    }
    var f1 = foo();
    console.log(f1);      // true

3.2 new 操作符作用

使用new操作符调用构造函数会经历下面几个步骤:
(1)创建一个以这个函数为原型的空对象.
(2)将函数的 prototype 赋值给对象的 proto 属性
(3)将对象作为函数的 this 传进去。如果有 return 出来东西是对象的话就直接返回 return 的内容,没有的话就返回创建的这个对象

function NewFunc(func){
  var ret = {};
  if (func.prototype !== null) {
    ret.__proto__ = func.prototype;
  }
  var ret1 = func.apply(ret, Array.prototype.slice.call(arguments, 1));
  if ((typeof ret1 === "object" || typeof ret1 === "function") && ret1 !== null) {
    return ret1;
  }
  return ret;
}

普通函数的作用主要是封装作用,能够在作用域内多处调用而已

3.3 构造函数解决对象识别

创建自定义的构造函数意味着可以通过 instanceof 将它的实例标识为一种特定的类型

  function Person(name,age,job){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
      console.log(this.name);
    }
  }
  
  var person1 = new Person('xyc', 23);
  var person2 = new Person('lxy', 22);
  
  console.log(person1 instanceof Person); //true
  console.log(person2 instanceof Person); //true
  console.log(person1 instanceof Object); //true 因为Person继承自Object,所以这里一样成立.

3.4 缺陷

构造函数创建对象的方式解决了代码重复对象识别的问题,但是创建的对象中含有方法时,每实例化一个Person,就会产生一个方法,也就是一个对象,每个对象分别占据内存。因此,构造函数创建对象的方式存在内存大量占用的风险

利用原型共享的特性,下面引入原型模式

4. 原型创建对象

  function Person(){}
  Person.prototype = {
    constructor: Person,
    name : "Nicholas",
    age : 29,
    job : "Software Engineer",
    friends : ["Shelby", "Court"],
    sayName : function () {
      alert(this.name);
    } 
  };
  
  var person1 = new Person();
  var person2 = new Person();
  
  person1.sayName();    //"Nicholas"
  person2.sayName();    //"Nicholas"
  
  person1.friends.push("Van");
  alert(person1.friends);    //"Shelby,Court,Van"
  alert(person2.friends);    //"Shelby,Court,Van"
  alert(person1.friends === person2.friends);  //true

原型创建对象的方式将属性和方法都存在与原型中,也就是说,只要通过这种形式创建的对象都会共享这些属性和对象,相对于方法共享这是我们乐于看到的,但是属性共享让每个实例缺失了“个性”;另外对于引用类型的属性共享时,如上面的例子,多个实例对引用类型的操作会被篡改

实例一般都要有属于自己的全部属性,这也决定了原型创建方式的局限性。下面引入非常经典的对象创建方式

5. 构造函数+原型创建对象(重点)

组合构造函数模式与原型模式:构造函数模式用于定义实力属性,而原型模式用于定义方法和共享的属性

  function Person(name, age, job){
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["Shelby", "Court"];
  }
  
  Person.prototype = {
    constructor : Person,
    sayName : function(){
      alert(this.name);
    }
  }
  
  var person1 = new Person("Nicholas", 29, "Software Engineer");
  var person2 = new Person("Greg", 27, "Doctor");
  
  person1.friends.push("Van");
  alert(person1.friends);    //"Shelby,Count,Van"
  alert(person2.friends);    //"Shelby,Count"
  alert(person1.friends === person2.friends); //false
  alert(person1.sayName === person2.sayName); //true

这种方式创建的实例对象,每个实例都会有自己的一份实例属性的副本,但同时又共享着对方法的引用,最大限度地节省了内存;另外,这种方式还支持相构造函数传递参数,解决了上面的各种问题


http://www.niftyadmin.cn/n/544745.html

相关文章

GDB调试Android代码——环境搭建及调试过程

网上看了好多关于GDB调试android本地代码的,但是都是直接上手,对于一点都不懂的我,真是难办,所以本人根据个人经历,总结下怎么从小白一步一步进行调试。 先讲一下GDB调试android本地代码的情况。开始看了好多资料&…

Dart语法篇之函数的使用

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 简述: 在上一篇文章中我们详细地研究了一下集合有关内容,包括集合的操作符的使用甚至我们还深入到源码实现原理,从…

Java使用Class.getResource(String path)获取资源问题

Class.getResource(String path)获取资源有个问题,如果对应的Class文件的路径有包含空格,空格会被转译为%20.转载于:https://www.cnblogs.com/zazalu/p/7782793.html

一篇入门的php Class 文章

刚在大略浏览了一下首页更新的那篇有关Class的文章(指PHPE的那篇 http://www.phpe.net/articles/389.shtml ),很不错,建议看看。 对类的摸索~~俺用了半年时间才大概理解类的作用和实现。主要是没有一篇能让…

python标准库介绍——33 thread 模块详解

?thread 模块(可选) thread 模块提为线程提供了一个低级 (low_level) 的接口, 如 [Example 3-6 #eg-3-6] 所示. 只有你在编译解释器时打开了线程支持才可以使用它. 如果没有特殊需要, 最好使用高级接口 threading 模块替代. Example 3-6. 使用 thread 模块[eg-3-6] File: thr…

ART虚拟机特点与组件

原文地址:ART虚拟机特点与组件 接下来以Android-5.1.1-R14版本的源码介绍ART虚拟机的相关知识,本来不想对Dalvik多说的,可是发现Dalvik虽然已经退休了,但其影响力依然不小,ART中很多地方都引用了其中的内容&#xff0c…

Hibernate的映射文件中基于主键的双向1对1的关联

Hibernate的映射文件中基于主键的双向1对1的关联 1、Hibernate中采用基于主键的映射策略是,有一端(任意一端)的主键生成策略要是foreign,根据对方的主键来生成自己的主键,它的实体不能拥有自己的主键生成策略&#xff…

Flutter布局分析

阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680 Flutter中主要有以下几种布局类的Widget: 线性布局Row和Column弹性布局Flex流式布局Wrap、Flow 层叠布局Stack、Positioned 线…