JavaScript【五】JavaScript中的对象1

2023-04-16 84

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： JavaScript【五】JavaScript中的对象

🌟前言

哈喽小伙伴们，本文将收录在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";
  }
}