侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论

构造函数与实例化,包装类

woku
2022-03-07 / 0 评论 / 0 点赞 / 79 阅读 / 3,117 字

构造函数中的this

  • 指向全局window

        function Fun() {
          this.color = 'red'
        }
    
  • 指向实例化对象

        function Fun(red) {
          this.color = red
        }
        var f1 = new Fun('red')
        var f2 = new Fun('black')
        console.log(f1.color)
        console.log(f2.color)
    

    new Fun的时候,那么Fun就是当做一个构造函数来执行了

    this指向的是实例化的对象new Fun('red') 中的this指向

    f1 打印f1.color就是'red'new Fun('black') 中的this指向,f2 打印f2.color就是'black'

this是怎么来的

在new Fun()的时候Fun这个函数肯定是被执行的,只是前面有一个new操作符而已。

那么这个new操作符干了啥呢?

    function Fun(red) {
      this.color = red
    }
    var f1 = new Fun('red')
    console.log(f1.color)
  1. 看到new了,知道你是在实例化,那么在构造函数中自动的创建一个空对象this

    伪代码

        function Fun(red) {
          this = {
    
          }
          this.color = red
        }
    
  2. 接着执行Fun函数里面的代码

    伪代码

       function Fun(red) {
          this = {
             color:'XXX'  
          }
          this.color = red
        }
    
  3. 将这个this对象返回

    伪代码

        function Fun(red) {
          this = {
             color:'XXX'  
          }
          this.color = red
          return this
        }
    
  4. 最后返回的这个对象交给f1,此时就能拿到f1.color

总结下来是不是和下面的代码类似呢

    function test() {
      var me = {}
      me.color = 'red'
      me.sex = 'male'
      return me
    }
    var t1 = test()

new的作用就是隐士的造了一个this并返回

自动的返回了this,那如果构造函数里面手动的返回了值呢?

  • 返回了原始值

        function Fun() {
          this.name = 'wyg'
          return 1
        }
        var f = new Fun()
        console.log(f)
    

    打印的结果是Fun的实例对象,并不会管你返回的原始值1

  • 返回了引用值

      function Fun() {
        this.name = 'wyg'
        return {
        }
      }
      var f = new Fun()
    

    console.log(f)此时这个返回的就是自己返回的空对象{}了,会返回你自己的。

可以发现:

如果返回的值是原始值,我不管,我依然返回我隐士创建的this对象

如果返回的是引用值,如{},[], function(){}之类,那么就返回你想返回的值

包装类

原始值

    var a = 1

    console.log(a.length)

a的值是一个原始值,原始值肯定就不会有属性和方法,对象才具备属性和方法。那打印a.length自然就是undefined

那如何让这个a有自己的属性呢?变成一个对象

原始值->数字对象

    var a = 1
    var b = new Number(a)
    b.name = 'wyg'
    b.age = 22
    console.log(a)  // 1
    console.log(b)  // Number {1, name: 'wyg', age: 22}

打印了之后,a是一个原始值,b通过new Number实例化了之后是一个对象了

既然b是对象,那么我们是不是就可以给他设置属性和方法啦~


b现在是一个数字对象了,那么能不能像原始值一样进行运算呢,咱们来试试

    var a = 1
    var b = new Number(a)
    b.name = 'wyg'
    b.age = 22
    console.log(a) // 1
    console.log(b) // Number对象
    var c = a + b
    console.log(c) // 2
    console.log(typeof c) // number
    console.log(b) // Number对象

在进行计算的时候,是转成原始值进行计算的,返回的c也是一个原始值

像这样的方式还有new String 、new Boolean,都是将原始值转成对象。

null和undefined情况

注意上面这几种null和undefined的情况

null和undefined是不能添加属性的

包装类过程

    var num = 1
    num.name = 'wyg'
    console.log(num.name)

给一个原始值num定义一个name的属性,本身是不允许的,但是js引擎看到你要给他加属性

看num的值是1,转成适合的对象类型(Number,String,Boolean) 对象才能定义属性嘛

  1. 转成new Number(1)
  2. New Number(1).name = 'wyg'
  3. New Number(1)创建了这样的一个对象,但是没有地方保存,于是被销毁了,此时属性肯定也不存在了
    var str = 'wyg'
    console.log(str.length)

这个时候也会转为new String('wyg')

转为new String包装类后有length属性,所以可以访问length属性

使用length对数组截断

    var arr = [1,2,3,4]
    arr.length = 2
    console.log(arr)  // [1,2]
    arr.length = 5
    console.log(arr)  // [1, 2, empty × 3]

如果是一个字符串原始值

    var str = 'wyg'
    str.length = 1
    console.log(str.length) // 3

str.length = 1

看到了str是一个原始值,要给他加属性,那么把他包装成字符串对象 new String('wyg')

new String('wyg').length = 1

new String('wyg')没有地方保存,于是删除

最后打印str.length 重新转换了一次 new String('wyg').length 获取的还是3

笔试题

第一题

考点:包装类

    var name = 'wyg'
    name += 10
    var type = typeof(name)
    if(type.length === 6) {
        type.text = 'string'
    }
    console.log(type.text) // undefined

type.text 原始值定义属性,包装为对象,然后赋值,但是没有地方保存,于是删除掉了。

最后打印type.text undefined

如果要让属性能正常打印出来

    var name = 'wyg'
    name += 10
    var type = new String(typeof(name)) 
    if(type.length === 6) {
        type.text = 'string'
    }
    console.log(type.text)

第二题

考点:闭包和实例化

        function Test(a,b,c) {
            var d = 1
            this.a = a
            this.b = b
            this.c = c
            function fun() {
                d++
                console.log(d)
            }
            this.g = fun
        }
        var test1 = new Test(1,2,3)
        test1.g()
        test1.g()
        var test2 = new Test(1,2,3)
        test2.g()

第三题

考点:预编译

        var x = 1,
            y = z = 0
        function add(n) {
            return n = n + 1
        }
        y = add(x)
        function add(n) {
            return n = n + 2
        }
        z = add(x)
        console.log(x,y,z)

第四题

考点:arguments

        function Test(a,b) {
            b = 10
            console.log(arguments[1])
        }
        Test(1,2)
        function Test(a,b) {
           arguments[1] = 10
           console.log(b)
        }
        Test(1,2)
0

评论区