(JS)实例对象与new命令

·  阅读 862

实例对象与new命令

1.对象是什么?

对象是对现实世界复杂关系的抽象表现,对象之间的分工合作,能够完成对真实世界的模拟。

(1)对象是单个实物的模拟

一把椅子,一本书,一个人都可以是对象,,当某个实物变成对象后,人和书、人和椅子的关系就能够抽象为两个对象之间的关系,从而实现对真实世界的模拟。

(2)对象是一个容器

对象是一个容器,里面能够存放许多特征,例如属性(property)是对象的状态,方法method是对象的行为。例如把交通工具抽象为一个对象,那么属性就是记录具体是哪一种交通工具,方法则记录该交通工具的驾驶方式。

2.构造函数

Javascript使用构造函数作为对象的模版,类似于古代的印刷术。

构造函数本质是一个普通的函数,但具备一些特征和用法。

var Animal=function(name){
    this.name=name;
};
复制代码

特点

  • 构造函数名字的第一个字母一般要大写
  • 函数体内部使用了`this`关键字,代表了所要生成的对象实例。
  • 生成对象的时候,必须使用`new`命令。

    3.new命令

    使用new命令,函数总会返回一个对象

    3.1 基本用法

    new命令的作用,就是执行构造函数,返回一个实例对象。

    var Animal=function(name){
        this.name=name;
    };
    
    var p = new Animal("pig");
    p.name; //pig
    复制代码

    new命令执行时,构造函数内部的this,会代表新生成的实例对象,this.name表示,实例对象会有一个name属性,值为pig

    特别注意

    构造函数一定要搭配new来使用,否则将得不到想要的结果。

    let a=Animal("pig");
    a; //undefined
    name; //pig
    复制代码

    因为没有搭配new,构造函数中的this指向window,导致生成一个名为name的全局变量.

    当使用严格模式时,未按标准使用构造函数,将会抛出一个错误。

    "uses strict";
    let a=Animal("pig");
    //TypeError: Cannot set property 'name' of undefined
    
    复制代码

    由于严格模式中,函数内部的this不能指向全局对象,默认等于undefined,导致不加new调用会报错

    3.2 new命令的原理

    使用new命令时,它后面的函数依次执行下面的步骤。

    1.创建一个空对象,作为将要返回的对象实例。 2.将这个空对象的原型,指向构造函数的prototype属性。 3.将这个空对象赋值给函数内部的this关键字。 4.开始执行构造函数内部的代码。

    构造函数之所以称之为构造函数,是因为在其内部this会指向一个new方法新生成的空对象,所有针对this的操作都会作用于这个空对象,以实现"构造"的效果。

    构造函数默认返回this对象,若构造函数内有return语句,且后面跟着一个对象,则会返回return语句指定的对象

    3.3 简化实现

    new命令简化的内部流程,可以用下面的代码表示。

    function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
      // 将 arguments 对象转为数组
      var args = [].slice.call(arguments);
      // 取出构造函数
      var constructor = args.shift();
      // 创建一个空对象,继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数
      var result = constructor.apply(context, args);
      // 如果返回结果是对象,就直接返回,否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
    }
    
    // 实例
    var actor = _new(Person, '张三', 28);
    复制代码

    4.Object.create() 创建实例对象

    如果希望以现有对象作为模版,构造一个新的对象,这时就可以使用Object.create()方法。

    var person1 = {
      name: '张三',
      age: 38,
      greeting: function() {
        console.log('Hi! I\'m ' + this.name + '.');
      }
    };
    
    var person2 = Object.create(person1);
    
    person2.name // 张三
    person2.greeting() // Hi! I'm 张三.
    复制代码

    上面代码中,对象person1是person2的模板,后者继承了前者的属性和方法。


    最后,感谢阮一峰老师的倾囊相助
  • 分类:
    前端
    标签:
    分类:
    前端
    标签:
    收藏成功!
    已添加到「」, 点击更改