美文网首页
js对象深入理解(二)

js对象深入理解(二)

作者: 感觉不错哦 | 来源:发表于2018-11-22 15:51 被阅读10次

    个人认为对象是JavaScript的一大难点,很多时候我们开发过程中都是在操作对象,所以全面了解对象很重要,可能它跟你的开发没有一毛钱关系......

    编辑文章的时候难免会扩展番外,比如运算符 堆栈 此类的,不会解释太详细,后续会编辑相应的文章让大家更了解

    可变的对象引用

    在此给大家介绍一下什么原始值

    JavaScript中的原始值,比如undefined、null、布尔值、数字,字符串,这些原始值是无法更改的,任何方法都无法改变一个原始值,难道我们能更改undefined属性吗? 不可能的,我们也没办法操作undefined,undefined与null比较特殊,它们是不存在构造形式的,也就是只有文字形式,也就是我们没法new 生成实例对象,只是一个属性,相反Date()只有new,不存在文字形式,Error对象也可以了解一下,用的比较少

    言归正传,undefined 数字无法更改比较好理解,字符串无法更改吗?

    我们知道字符串有很多方法用来修改字符串的值,但是它的原始值是不会改变的,返回的只是未赋予变量的新的字符串

         var s='test';
        s[0]='T'
        console.log(s)//test
    
        var s='test';
        s.toUpperCase()
        console.log(s)//test
    

    这就是原始值,原始字符串的值并不会改变!对象就不一样了,对象的原始值是可以改变的

        var a={
                x:1
        }
        a.x=2;
        a.y=3
        console.log(a) //x=2,y=3
    

    我们发现对象的值很容易就能改变

    这边介绍一下对象的取值

    对象常用.点 来获取属性,也可以使用[]

        var a={
                x:1
        }
        console.log(a['x'])  //一般我们使用属性访问,这种方法称之为键访问
    

    键访问的特点就是属性一定是字符串,也就是要加双引号,因为对象里面的属性都是字符串,这个是默认的,好比这个例子

        var a={
                this:1  我们可以使用this保留字,其实是因为在对象中属性的状态是string
          }
        console.log(a['this'])
    

    对象还有恶心的计算属性名,然而这个用的少就不解释了

    接着看理解例子
        var arr=[1,2,3]
        arr[0]=0;
        arr[3]=4
        console.log(arr) 0 1 2 4
    

    数组也是可以修改的,因为数组是有序的集合所以我们可以通过下标获取值

    我们来看看比较

    原始值的比较 是值与值的比较,只有在它们的值相等时才相等,这对布尔值 null和undefined来说听起来有点难理解,并没有办法来比较它们,我们拿字符串举例子,因为只有当字符串的长度相等并且每个索引的字符相等,JavaScript才认为它们相等

    对象和原始值就不一样了,有点基础的小伙伴应该知道,对象是JavaScript数据类型中特殊的那一个,引用类型,对象的比较并非值的比较,完全相等的两个对象在JavaScript中是不相等的

        var a=[];
        var b=[]
        var c={}
        var d={}
        console.log(a===b,c===d) //false false
    

    这就是引用对象,对象的比较不是值的比较,而是引用的比较,当且仅当它们引用同一个基对象时才相等,现在是不是理解了[]==[]为什么为false了呢

        var a=[];
        var b=a;
        console.log(a===b) //true
    

    当然这种情况就是b的改变也会改变a,因为它们的指针指向同一个堆栈,日后我再带大家理解js的堆栈,代码执行机制
    如果我们想复制一个数组,一般是使用循环遍历赋值,由于javascript的机制我们是没办法比较数组对象的,如果有时候我们只是想单独的比较,需要自己封装一个方法

        function iftrue(a,b){
                if(a.length!=b.length){
                        return false
                }
                for(var i=0;i<a.length;i++){
                        if(a[i]!==b[i]){
                                return false
                        }
                }
                return true
        }
    

    这样就可以做比较是否相同了
    再抛个问题,为什么[]==![]又为true了呢 ,这个就是运算符的优先级问题了,首先右边的!会优先执行,我们都知道!是会转换为布尔值的,那么右边此时就是false了,这样是不是就很好区分了呢,左边经过转换变为0,右边也是0,不就true了吗?除了一些本来就是false的 比如false布尔值,NaN,undefined 任何变量前面加两个!!都是为true,不番外了,我们继续看下一个,以后有机会了解隐式转换到底转换了什么

    对象的属性操作

    开始讲对象的一些实际操作

    对象常用的用法是创建、设置、查找、删除、检测和枚举它的属性
    每个对象都有属性,(又要开始废话了)属性包括名字和值,属性名可以是包含空字符串在内的任意字符串(比如 “ aa a ”这种中间有空格的),对象中不能存在两个同名的属性。每个属性除了名字和值之外,还有一些与之相关的值,称为“属性特性”,是根据对象的用法分类

    比如这个属性可以设置值,那么它的属性特性就是可写的,如果这个属性可以通过for/in循环返回该属性,它的属性特性就是可枚举,可以修改删除属性就是可配置,在ESMAScript5之前通过代码给对象创建的所有属性都是可写可配置可枚举,在ESMAScript中可以对以这些特性加以配置,后续再说

    因为JS是一个轻量级解释或即时编译的函数式语言,里面有很多的概念,轻量、解释、编译、即时编译、函数式;同时它也是一款弱类型的语言,语言有无类型、弱类型、强类型三种。因为弱类型很难听,所以我喜欢称之为轻量型语言,当然了弱类型只是JavaScript对于代码的检查相对较弱而已,TS就是很好的强类型语言

    对象的创建

    对象创建常用的就是字面量与构造函数
    我们主要介绍第三个 Object.create()

    Object.create是ESMAScript5新定义的属性,它创建一个新对象,第一个参数是这个对象的原型,第二个参数可选,后续说明,看例子

    var a=Object.create({x:1,y:2})
    console.log(a.x)   //1
    

    此时 a对象继承了第一个参数对象原型中的属性,注意第一个参数必须是一个对象,空对象也是可以的,只是无法继承属性

        var a=Object.create({})
        a.x=3
        console.log(a) //{x:3}
    

    空对象就类似null了,因为null也是一个对象

        var a=Object.create(null)
        a.x=3
        console.log(a)//{x:3}
    
    问题来了 虽然我们传{}没有继承属性,但还是继承了String()的方法
        var a=Object.create({})
        a.x=3
        console.log(a.toString) // function
    
        var a=Object.create(null)
        a.x=3
        console.log(a.toString)//undefined
    

    此时它将不继承所有的属性,注意一下
    这是一个强大的特性,换句话说它能继承对象所有的特性

    var o=Object.create(Object.protrotype)
    

    此时o岂不是相当于新的new Object了

    相关文章

      网友评论

          本文标题:js对象深入理解(二)

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