构造函数及实例化原理、包装类(九)

2020/5/26 JS

# 一、构造函数及实例化原理

/**
 * GO = {
 *  Car: function () {...}
 *  car1: {
 *  color: 'red',
 *  brand: 'Benz'
 * }
 * }
 * AO = {
 *   this: {}
 * }
 */
function Car(color, brand) {
  /**
   * this = {
   *  color: color,
   *  brand: brand
   * }
   * 
   * return this;
   */
  this.color = color;
  this.brand = brand;
}

var car1 = new Car('red', 'Benz');
console.log(car1.color);
//-------------------------------------------------
function Car(color, brand) {
  var me = {};
  me.color = color;
  me.brand = brand;

  return me;
  /**
   * me = {
   * color: color,
   * brand: brand
   * }
   */
}

var car = Car('red', 'Mazda');

console.log(car.color);
console.log(car.brand);
//-----------------------------------------------------
// 如果 return 的不是原始值,将会被返回,否则,隐式返回this
function Car() {
  this.color = 'red';
  this.brand = 'Benz';

  return {};
}

var car1 = new Car();
console.log(car1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

# 二、包装类

原始值没有自己的属性和方法。 null、undefined不可以设置属性和方法

  1. Number
  2. String
  3. Boolean
var a = 1; // 原始值
var b = new Number(a);
b.length = 1;
b.add = function () {
  console.log(1);
}

var d = b + 1;
console.log(b); // 2

var a = 'abc';
console.log(a); 

var aa = new String('abc');
console.log(aa);

var bb = aa + 'bcd';
console.log(bb);

var a = 123;
a.len = 3;
// new Number(123).len = 3 delete

console.log(a.len); // undefined

// str -> length
// console.log(new String(str).length)
var str = 'abc';
console.log(str.length);

// 截断数组
var arr = [1, 2, 3, 4, 5];
arr.length = 3;
console.log(arr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 三、面试题

/**
 * GO = {
 * name: undefined -> 'hello' -> 'hello10'
 * type: undefined -> 'string'
 * }
 */
var name = 'hello';
name += 10;

var type = typeof (name);

if (type.length === 6) {
  // new String(type)
  // type.text = 'string'
  // delete
  type.text = 'string';
}

console.log(type.text); // undefined
//----------------------------------------------------------------
function Test(a, b, c) {
  var d = 1;
  this.a = a;
  this.b = b;
  this.c = c;
  this.f = function () {
    d++;
    console.log(d);
  }
  // return this; 形成闭包
}

var test1 = new Test();
var test2 = new Test();
test1.f();
test1.f();
test2.f();
//----------------------------------------------------------------
/**
 * GO = {
 *  x: undefined -> 1
 *  y: undefined -> 0 -> 4
 *  z: 0 -> 4
 *  add: function () { return n = n + 1 } -> function () { return n = n + 3 }
 * }
 */
var x = 1,
  y = z = 0;

function add(n) {
  return n = n + 1;
}

y = add(x);

function add(n) {
  return n = n + 3;
}

z = add(x);

console.log(x, y, z); // 1, 4, 4
//---------------------------------------------------------------------
function foo1(x) {
  console.log(arguments);
  return x;
}

foo(1, 2, 3, 4, 5); // 1,2,3,4,5

function foo2(x) {
  console.log(arguments);
  return x;
} (1, 2, 3, 4, 5); // 不会执行 (1, 2, 3, 4, 5)是表达式

(function foo3(x) {
  console.log(arguments);
  return x;
})(1, 2, 3, 4, 5); // 1,2,3,4,5
//---------------------------------------------------------------------
// 映射关系
function b(x, y, a) {
  // a = 10;
  // console.log(arguments[2]);

  arguments[2] = 10;
  console.log(a);  // 10
}

b(1, 2, 3);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
Last Updated: 2022/7/21 10:52:53
Genshin Impact bgm
Genshin Impact