美文网首页
JS重要概念之对象与构造函数

JS重要概念之对象与构造函数

作者: 张先觉 | 来源:发表于2020-11-12 21:13 被阅读0次

#对象和构造函数

对象:,JS存储数据的一种数据结构例如:{ name: xiaoming }
构造函数: 用于创建对象的自定义函数,我们往往使用大驼峰命名的方式,与普通函数进行区分例如:function Teacher() {}
new关键字: 改变this的指向。

对象和构造函数之间的关系是怎么样的?

对象,借助new关键字,实例化构造函数而来。下面就是声明对象的三种方式:

  1. 使用系统自带的构造函数Object,实例化对象例如:var obj = new Object()
  2. 使用自定义构造函数,实例化对象例如:function Teacher(){};var obj = new Teacher();
  3. 使用字面量,实例化对象例如: var obj = {}

# 构造函数以及实例化的原理:new关键字this

  • 区分Test()new Test()二者之间的关系:

Test()new Test()两种执行函数的方式,本质上没有什么不同。只是在使用new关键的时候,构造函数会事先隐式生成地声明一个this空对象,存到AO上下文中例如:AO.this = {};,以及最后返回结果的时候,会默认返回隐式生成的this对象例如:return AO.this;,而不是undefined。

// GO.this = {};
function Test() {
    console.log(this === window); // 打印结果是:true
}
Test();


// 使用new关键字执行函数的时候:
// GO.this = {};
function Test() {
    // var AO.this = {};
    console.log(this === window); // 打印结果是:false

    // 构造函数返回this
    // return AO.this;
}
new Test();
  • 不使用new关键字的前提下,如何用构造函数声明对象?
function Test(name, age) {
    var my_this = {};
    my_this.name = name;
    my_this.age = age;
    return my_this;
}
// 不使用new关键字,声明对象
var obj = Test('xiaoming', 18);
console.log(obj.name, obj.age);

#练习题:

  • 1. 同一构造函数声明的不同对象互不影响?相互独立?

原因:构造函数Test生成的AO对象因为闭包而不被销毁,当构造函数执行完毕之后,便会切断与AO对象的引用关系。就算下次还执行构造函数Test,它也会生成新的AO对象。


function Test(a,b,c) {
    var d = 1;
    this.a = a;
    this.b = b;
    this.c = c;

    function f() {
        d++;
        console.log(d);
    }

    this.g = f;
    // 隐式:return this; 形成闭包
}

var test1 = new Test();
test1.g();  // 打印结果:2
test1.g();  // 打印结果:3
test1.g();  // 打印结果:4

var test2 = new Test();
test2.g(); // 打印结果:2
test1.g(); // 打印结果:5
  1. 写一个“读书通知对象”,熟悉构造函数的使用某某人正在读某某书
function Book(opt) {
    this.name = opt.name;
    this.author = opt.author;
}

function Person(opt) {
    this.name = opt.name;
    this.age = opt.age;
    this.notice = function () {

        // 关键点;此处参数写法new Book(opt.bookOpt);
        var reading = new Book(opt.bookOpt);
        console.log(`${this.age}岁的${this.name}正在阅读${reading.author}的${reading.name}`);
    };
}

var Tom = new Person({
    name: "张三",
    age: 8,
    bookOpt: {
        name: "《庄子喃哗》",
        author: "南老头儿",
    },
});
Tom.notice(); // 结果: 8岁的张三正在阅读南老头儿的《庄子喃哗》

相关文章

  • this-原型

    构造函数 概念 每一个对象都有与之对应的构造函数 一个构造函数可以对应好多个对象 构造是对一类对象的描述 JS的构...

  • JS重要概念之对象与构造函数

    #对象和构造函数 对象:,JS存储数据的一种数据结构例如:{ name: xiaoming }构造函数: 用于创建...

  • 对象的相关概念和方法

    对象的概念 因为js中没有真正类的概念. js的实例对象都是通过函数的构造函数调用生成的(new), 对象和对象...

  • 构造函数和es6知识点

    构造函数 一、构造函数: 说构造函数的概念之前我们应该先了解类的概念,类与对象的概念息息相关,我们在讲对象的概念的...

  • 论js里 面向对象的原型

    一、原型的概念: 1、原型的概念:执行构造函数代码时,js系统会给这个构造函数创建一个原型对象,构造函数中也包含一...

  • js原型和继承

    原型 一、原型的概念 执⾏构造函数代码时, js系统会给这个构造函数创建⼀个原型对象,构造函数中也包含⼀个prot...

  • 我的JS笔记 -- 类

    JS是没有类的,但JS可以利用构造函数实现近似类的功能。 构造函数 构造函数,是用来创建对象的函数。与普通的函数声...

  • JavaScript原型对象

    原型:概念:执行构造函数代码时,js系统会给这个构造函数创建一个原型对象,构造函数中也包含一个prototype属...

  • 2020-12-15

    js对象的创建和函数 创建对象 工厂模式 构造函数 原型方式+构造函数

  • 2018-5-31构造函数

    构造函数: 说构造函数的概念之前我们应该先了解类的概念,类与对象的概念息息相关,我们在讲对象的概念的时候说...

网友评论

      本文标题:JS重要概念之对象与构造函数

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