JS创建对象的方法

作者: 招投标秘籍 | 来源:发表于2021-03-14 22:35 被阅读0次

    1.对象的理解

    对象是单个实物的抽象,一个网页都可以称为一个对象.接下来我们将接受几种方法如何在编程中创建对象.

    2.几种创建对象的方法

    2.1Object.create()

    此方法一般用在已经有现有的对象时,希望以此对象为模板来创建一个新对象,可以用此方法来创建新对象.

    let person = {
      name: '李四',
      age: 18,
      greeting: function() {
        console.log('Hi! I\'m ' + this.name + '.');
      }
    };
    
    
    let person1 = Object.create(person);//以person为原型,继承了person的属性
    
    person1.name // 李四
    person1.greeting() // Hi! I'm 李四
    

    2.2构造函数(new+this)

    2.2.1何为构造函数

    我们都知道JS是基于原型来实现继承的,而prototype的属性放在构造函数上,构造函数就是一个普通的函数,但具有自己的特征和用法,构造函数的首字母为大写.

    2.2.2构造函数创建对象
    function Person(name,age){//此处为构造函数 放着自有属性
        this.name=name//this用来表示创建的这个对象
       this.age=age
    }
    Person.prototype.sayHi=function(){
       console.log('你好,我叫'+ person.name)
    }//此处Person.prototype来存放共有属性
    let person = new Person('frank', 18)//new命令
    person.name === 'frank' // true
    person.age === 18 // true
    person.sayHi() // 打印出「你好,我叫 frank」
    
    let person2 = new Person('jack', 19)
    person2.name === 'jack' // true
    person2.age === 19 // true
    person2.sayHi() // 打印出「你好,我叫 jack」
    
    2.2.3new命令详解

    大家看上面的例子是不是很奇怪写了new X()就有对象了 而且继承了共有属性了.
    从上面的例子我们可以看出用new X()命令做了几件事:

    1. 自动创建空对象
    2. 自动为空对象关联原型,原型地址为X.prototype
    3. 自动将空对象作为this关键字运行构造函数
    4. 自动返回this
      是不是感到了js之父的爱.
    2.2.4this关键字

    简单说,this就是属性或方法“当前”所在的对象.

    2.3.class(ES6引入的新语法)

    class 声明创建一个基于原型继承的具有给定名称的新类

    class Person {
          constructor(name,age){//这边需要先需要声明
            this.name=name//放对象自己的属性
            this.age=age
        }
        sayHi(){
          console.log('你好,我叫'+ this.name) //放对象的共有属性
    }
    }
    let person = new Person('frank', 18)//new命令
    person.name === 'frank' // true
    person.age === 18 // true
    person.sayHi() // 打印出「你好,我叫 frank」
    
    let person2 = new Person('jack', 19)
    person2.name === 'jack' // true
    person2.age === 19 // true
    person2.sayHi() // 打印出「你好,我叫 jack」
    可以和上面的例子来进行对比
    

    以上就是创建对象的几种方法,大家可以对比一下用法,都需要掌握.
    本文为本人的原创文章,著作权归本人和饥人谷所有,转载务必注明来源.
    参考文章

    1. https://wangdoc.com/javascript/oop/index.html(阮一峰教程)
      2.https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Guide/Working_with_Objects(使用对象)

    相关文章

      网友评论

        本文标题:JS创建对象的方法

        本文链接:https://www.haomeiwen.com/subject/ptaqcltx.html