🌟前言
哈喽小伙伴们，本文将收录在JavaScript【前端童子功】这个专栏里；这个专栏里边会收录一些JavaScript的基础知识和项目实战；希望大家可以多多支持，你们的支持就是我创作的动力；让我们一起来看看吧🤘
🌟对象：
一切皆对象，对象是属性和方法的无序结合。
- 属性：用数据值来描述它的状态。
- 方法：用来改变对象的行为叫做方法，一个方法是一个值为某个函数的大户型。
🌟声明对象：
🌟隐式创建对象：
var cup={ size:"450ml", color:"red", material:"glass", warm:function (){ return "warm"; } } console.log(cup.size); console.log(cup.color); console.log(cup.material); console.log(cup.warm());
🌟实例化Object：
var cup=new Object(); cup.size="500ml"; cup.color="blue" cup.material="glass" cup.warm=function(){ return "warm" } console.log(cup.size); console.log(cup.color); console.log(cup.material); console.log(cup.warm());
🌟实例化自定义构造函数：(会重复占用内存)
构造函数类；实例化对象单个对象
function Cup(size,color,material){ this.size=size; this.color=color; this.material=material; this.warm=function(){ console.log("warm");; } this.storeUp=function(water){ return "store up"+water; } } var cup1=new Cup("500ml","red","玻璃") console.log(cup1); var cup2=new Cup("450ml","yellow","不锈钢") console.log(cup2); var cup3=new Cup("300ml","blue","紫砂") console.log(cup3);
🌟new运算符具体做了什么:
function Base(){ this.name = "zhangsan"; this.age = 20; } var obj = new Base(); // new操作符等价于 var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj);
- 创建了一个空对象
obj - 将这个空对象的
__proto__成员指向了Base函数对象prototype成员对象。相当于obj拥有了Base原型上的属性方法
- 将Base函数对象的
this指针替换成obj，然后再调用Base函数，于是就给obj对象赋值了一个name和age成员变量。相当于obj拥有了Base构造函数上的属性方法
var this = Object.create(Peson.prototype);
🌟instanceof关键字(一元运算符)
如果obj对象是构造函数Fun的一个实例，则 obj instanceof Fun 返回 true。
判断一个对象是否是一个构造函数的实例：
obj instanceof Object // true obj instanceof Object // false
🌟增
对象.属性名=属性值； 对象。方法名=方法‘
🌟删(删除对象或者对象上的属性方法)
- 销毁对象
javascript中的垃圾回收机制在对象没有引用的时候会进行销毁，释放内存
对象=null;
删除对象上的属性和方法，使用delete运算符
- 删除属性：
delete 对象.属性名 - 删除方法：
delete 对象.方法名
var obj={ a:'a', b:function(){console.log('这是一个方法')} } delete obj.a; //删除obj对象上的a属性 delete obj.b; //删除obj对象上的b方法
🌟改(修改属性和方法)
直接为属性或方法赋新值即可
对象.属性名=新的属性值; 对象.方法名=新的方法;
🌟查对象(访问)
- 访问属性
对象.属性名; 对象["属性名"]; //字符串
访问方法
对象.方法名(); 对象["方法名"](); //字符串
注：当属性名或方法名保存到变量中时，访问该属性或方法需要使用[]
for(let i in obj){ obj[i] // i是存储属性名的变量，所以访问该属性时必须通过[] }
🌟对象的遍历
- for in 循环
循环遍历对象
自身的和继承的可枚举属性(不含Symbol属性).
var obj={ name:'小米', age:18, say:function(){ console.log('你好'); } } for (var i in obj) { console.log(obj[i]); }
🌟对象的拷贝
由于对象是引用类型，变量中存储的是数据的地址，所以对象直接通过=赋值只能将地址赋值而不是数据。
对象的拷贝分为浅拷贝、深拷贝：
var obj = { type: "animal", cat:{ name:"Tom", weight: 16, food:["fish","meat"] }, }
- 浅拷贝：直接拷贝对象的内存地址，如果原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变
- 1：直接复制
var newobj=obj;
- 2：
Object.assign(obj)
var newobj=Object.aaign(obj)
- 深拷贝： 新开辟一块内存，将对象中所有属性全部复制，如果原地址中对象被改变了，那么深拷贝出来的对象不变
深拷贝实现方法：
- 递归遍历，逐层拷贝。 因为基础类型可以直接拷贝，所以通过递归遍历对象的每一层，全部得到基础类型后再拷贝。
function deepCopy(0){ var newobj={}; for(var i in o){ if(typeof o[i]=="bject"){ newobj[i]=deepCopy(0[i]); }else{ newobj[i]=o[i]; } } return newobj; } var newobj=deepCopy{obj};
- 通过
JSON.stringify()先将对象转化为字符串，字符串赋值后再通过JSON.parse()转化回对象。(方法无法转换)
JSON是轻量级数据交互的格式
- Object.assign({},obj）
var newobj=Object.assign({},obj)
🌟对象的特性
- 封装
- 继承
🌟封装
封装： 将对象的所有组成部分组合起来，尽可能的隐藏对象的部分细节，使其受到保护，只提供有限的接口与外部发生联系。
例如同时生成多个相同的对象，可以将生成对象的过程打包直接调用，这个过程就是封装
优点：
- 安全，使用时无法看到具体实现细节，只需要直接调用
- 便于修改操作
🌟封装方法
- 工厂函数（不推荐使用）
将创建对象并赋值的过程封装成一个函数
function person(name,sex){ var person = {}; person.name = name; person.sex = sex; person.say = function(){ alert("说话"); } return person; } var zhangsan = person("张三","man"); alert(zhangsan.name);
构造函数（每创建一个对象，会把相同的代码存储到内存中，会造成对内存的浪费）
function person(name,sex){ this.name = name; this.sex = sex; this.say = function(){ alert("说话"); } } var lisi = new person("李四","boy"); alert(lisi.sex);
每次使用工厂函数或构造函数，内部的属性和方法都会在内存中重新开辟一个控件存储生成的对象，导致某些相同的方法或属性被重复保存，占用内存。
- prototype方法（会把共享的方法或属性放到代码段中来存储,它不能共享对象）
构造函数+原型
实例一：
person.prototype.eat=function(){ alert("吃饭"); } var lisi=new person("李四","boy"); lisi.eat();
实例二：
person.prototype.aaa = {name:"王五"}; var lisi = new person("李四","boy"); var zhaoliu = new person("赵六","boy"); alert(lisi.aaa.name = "xiaosi"); //xiaosi alert(zhaoliu.aaa.name); //xiaosi 将原型上的属性值一起改了
私有属性方法放到构造函数中，共有方法放到原型中
function person(user, sex){ this.user = user; this.sex = sex; } person.prototype = { eat: funciton(){ return "eat"; } play: funciton(){ return "play"; } }
