• 技术文章 >web前端 >前端问答

    JavaScript构造器是什么

    长期闲置长期闲置2022-01-19 14:32:05原创247

    在JavaScript中,构造器是一个当新建对象的内存被分配后,用来初始化该对象的一个特殊函数,对象构造器是被用来创建特殊类型的对象,在对象初次被创建时,通过接收参数,用来对成员的属性和方法进行赋值。

    本教程操作环境:windows10系统、javascript1.8.5版、Dell G3电脑。

    JavaScript构造器是什么

    在面向对象编程中,构造器是一个当新建对象的内存被分配后,用来初始化该对象的一个特殊函数。在 JavaScript 中一切皆对象。 对象构造器是被用来创建特殊类型的对象,首先它要准备使用的对象,其次在对象初次被创建时,通过接收参数,用来对成员的属性和方法进行赋值。

    对象创建

    创建对象的三种基本方式:

    var newObject = {};
    // or
    var newObject = Object.create( null );
    // or
    var newObject = new Object();

    在 Object 构造器为特定的值创建对象封装,或者没有传递值时,它将创建一个空对象并返回它。

    将一个键值对赋给一个对象的四种方式:

    // ECMAScript 3 兼容形式
    // 1. “点号”法
    // 设置属性
    newObject.someKey = "Hello World";
    // 获取属性
    var key = newObject.someKey;
    // 2. “方括号”法
    // 设置属性
    newObject["someKey"] = "Hello World";
    // 获取属性
    var key = newObject["someKey"];
    // ECMAScript 5 仅兼容性形式
    // For more information see: http://kangax.github.com/es5-compat-table/
    // 3. Object.defineProperty方式
    // 设置属性
    Object.defineProperty( newObject, "someKey", {
        value: "for more control of the property's behavior",
        writable: true,
        enumerable: true,
        configurable: true
    });
    // 如果上面的方式你感到难以阅读,可以简短的写成下面这样:
    var defineProp = function ( obj, key, value ){
        var config = {
            value
        }
      Object.defineProperty( obj, key, config );
    };
    // 为了使用它,我们要创建一个“person”对象
    var person = Object.create( null );
    // 用属性构造对象
    defineProp( person, "car",  "Delorean" );
    defineProp( person, "dateOfBirth", "1981" );
    defineProp( person, "hasBeard", false );
    // 还可以创建一个继承于Person的赛车司机
    var driver = Object.create( person );
    // 设置司机的属性
    defineProp(driver, "topSpeed", "100mph");
    // 获取继承的属性 (1981)
    console.log( driver.dateOfBirth );
    // 获取我们设置的属性 (100mph)
    console.log( driver.topSpeed );
    // 4. Object.defineProperties方式
    // 设置属性
    Object.defineProperties( newObject, {
      "someKey": { 
        value: "Hello World", 
        writable: true 
      },
      "anotherKey": { 
        value: "Foo bar", 
        writable: false 
      } 
    });
    // 3和4中的读取属行可用1和2中的任意一种

    基础构造器

    正如我们先前所看到的,JavaScript 不支持类的概念,但它有一种与对象一起工作的构造器函数。使用 new 关键字来调用该函数,我们可以告诉 JavaScript 把这个函数当做一个构造器来用,它可以用自己所定义的成员来初始化一个对象。

    在这个构造器内部,关键字 this 引用到刚被创建的对象。回到对象创建,一个基本的构造函数看起来像这样:

    function Car( model, year, miles ) {
      this.model = model;
      this.year = year;
      this.miles = miles;
      this.toString = function () {
        return this.model + " has done " + this.miles + " miles";
      };
    }
    // 使用:
    // 我们可以实例化一个Car
    var civic = new Car( "Honda Civic", 2009, 20000 );
    var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
    // 打开浏览器控制台查看这些对象toString()方法的输出值
    console.log( civic.toString() );
    console.log( mondeo.toString() );

    上述是个简单版本的构造器模式,但它有两个问题:

    难以继承

    每个 Car 构造函数创建的对象中,toString() 之类的函数都被重新定义

    这不是非常好,理想的情况是所有 Car 类型的对象都应该引用同一个函数

    使用“原型( prototype )”的构造器

    在 JavaScript 中函数有一个 prototype 的属性。当我们调用 JavaScript 的构造器创建一个对象时,构造函数 prototype 上的属性对于所创建的对象来说都能被访问和调用

    function Car( model, year, miles ) {
      this.model = model;
      this.year = year;
      this.miles = miles;
    }
    // 注意这里我们使用 Object.prototype.newMethod 而不是 Object.prototype ,以避免我们重新定义原型对象
    Car.prototype.toString = function () {
      return this.model + " has done " + this.miles + " miles";
    };
    // 使用:
    var civic = new Car( "Honda Civic", 2009, 20000 );
    var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
    console.log( civic.toString() );
    console.log( mondeo.toString() );

    通过上面代码,单个 toString() 实例被所有的 Car 对象所共享了。

    相关推荐:javascript学习教程

    以上就是JavaScript构造器是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 前端 html
    上一篇:ajax()中data参数是什么意思 下一篇:javascript语法基本要素是什么
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• JavaScript中怎样利用for求和• javascript能增加标签吗• JavaScript函数有返回值吗• javascript异步是什么意思• javascript怎么改变图片地址
    1/1

    PHP中文网