WEB前端JavaScript—对象-优快云博客

本文详细介绍了JavaScript中对象的概念、动态类型特性，以及构造函数、工厂模式、原型和实例化的使用。特别强调了数据共享的解决方案——原型，以及构造函数、实例对象和原型对象之间的关系。

前言

JS是【基于对象】的语言。非面向对象，但是可以模拟面向对象的思想
对象占两部分空间：栈区存放指针，堆区存放对象
JS为什么是动态类型语言：因为如果写了某个变量，只有程序执行到这个变量之后才能明确这么变量的类型。
对象是一组【无序】数据的集合，属性值可以为任意数据。
构造函数的作用就是创建对象。

创建对象的方式

调用系统的构造函数

语法：var obj = new Object();

自定义构造函数

语法：var obj = new 自定义();

function Child(name, age) {
    this.name = name;
    this.age = age;
    this.play = function() {
        console.log('开始玩了, 我是:' + this.name);
    }
}
// 构造对象
var obj = new Child('boy', 23);
obj.play();
//判断是不是某个类的实例
console.log(obj instanceof Child);

**底层：**在new Child('boy', 23)时做了4件事：
(1). 内存开辟空间，存储创建的新对象。
(2). 将this设置为当前对象。
(3). 设置对象属性和方法。
(4). 把this这个对象返回。
注意：普通函数和构造函数的区别，名称是不是【大写】

字面量

语法：var obj ={...};

var obj = {
    name: '小明',
    age: 10,
    sex: '男',
    saySelf() {
        console.log('名字:' + this.name);
    }
}
obj.saySelf();

缺点：是一次性的对象，修改属性只能重新赋值。

成员

添加/获取成员属性

定义：对象.名字 = 值; 如obj.name="demanwei";
获取：
- 对象.名字，如console.log(obj.name);
- 对象["名字"]，如console.log(obj["name"]);

定义/调用成员方法

定义：对象.名字 = 匿名函数;

obj.eat = function() {
    log("666");
};

调用：
- 对象.名字()，如obj.eat();
- 对象["名字"]()，如obj["eat"]();

对象是不是某数据类型

对象和构造函数的关系：实例化对象是通过构造函数创建的，该过程叫实例化
语法：
- 通过构造器：对象.constructor == 构造函数名;
- 对象 instanceof 构造函数名 == true;
注意：尽可能使用下面的方式，少用构造器。

工厂模式和构造函数

工厂模式

function createChild(name, sex) {
	var obj = new Object();
	obj.name = name;
	obj.sex = sex;
	obj.cry = function () {
        console.log(`我叫:${this.name}, 性别:${this.sex}`);
	};
	return obj;
}
var child = createChild('小明', '男');
child.cry();

构造函数

function Child(name,sex) {
    this.name = name;
    this.sex = sex;
    this.cry = function () {
        console.log(`我叫:${this.name}, 性别:${this.sex}`);
    };
    // 无需return
}
var child = new Child('小明', '男');
child.cry();

两者区别

	工厂模式	构造函数
函数名	首字母小写	首字母大写
new	无	有
return	有	无
当前对象	new之后的对象	this
创建对象	直接调用函数	new
共同点	都是函数，	都可以创建对象、传参

原型

初识原型

作用：解决【数据共享】问题。因为如果在构造函数直接定义方法，创建多个对象就会创建多个不同的此方法，十分浪费内存。
语法：构造函数名.prototype.属性或方法 = 属性值或匿名函数;

例子:

// 下面所有的prototype都是基于这个构造函数
function Person(name) {
	this.name = name;
}
Person.prototype.name = 'demanwei';
Person.prototype.eat = function() {
    console.log('吃了');
};

// 简单写法,必须手动写构造器指向构造函数
Person.prototype = {
    // 必须手动写构造器指向构造函数
    constructor = Person,
    name: 'demanwei',
    eat: function(){
        console.log('吃了');
    }
};

注意

原型中的方法是可以互相访问的。
简单写法必须手动写构造器指向构造函数。
原型对象链：实例对象调用属性或方法，现在实例中查找，找到了直接用;找不到去实例对象__proto__指向的原型对象的prototype去找，找到了使用;如果还找不到，就报错。
可以为内置对象添加原型prototype。

构造/实例/原型对象关系

构造函数创造实例对象。
构造函数的【prototype属性就是原型对象】，原型对象有构造器和自定义函数。其中，constructor构造器指向了自身构造函数。
实例对象的__proto__属性指向了构造函数的原型对象prototype。因此，原型对象里面的方法能被实例对象共享、直接访问。实际上，【__proto__其实就是实例对象的原型对象】