JavaScript基础9.构造函数及实例化原理、包装类

复习

function Car(){
  this.color = 'black';
  this.brand = 'Benz';
  this.drive = function(){
    console.log('I am running');
  }
}
var car = new Car();

console.log(car.color);
console.log(car.brand);
car.drive();

9.1 构造函数及实例化原理

this在没有实例化的时候是window,一旦实例化this指向实例化对象

//GO = {
//    Car : (function)
//    car1 : {
//      color : 'red';    
//      brand : 'Benz';
//     }
//}
//实例化时相当于Car被执行了,自动生成了this对象
//AO = {
//    this = {
//      color = color;
//      brand = brand;
//}
//}
function Car(color, brand) { 
  //this = {
  //    color = color;
  //    brand = brand;
  //}
  this.color = color;
  this.brand = brand;
  //return this;
}

var car1 = new Car('red', 'Benz'); 
var car2 = new Car('write', 'Mazda'); 
console.log(car1.color);
console.log(car2.color);

显示呈现

function Car(color, brand) {
  var me = {};
  me.color = color;
  me.brand = brand;
  return me;
}

var car = new Car('red', 'Mazda');
console.log(car.color);
console.log(car.brand);

和普通函数没区别，new的时候只是系统帮忙把this指向实例化的对象

function test(){
  var obj = {
    name: 'Tom',
    color: 'blue'
  }
  return obj;
}
var obj = test();
console.log(obj.name);

当构造函数返回的是引用值时，如：函数、对象、数组，就返回引用值。
返回的是原始值，没有任何作用

function Car(){
  this.color = 'red';
  this.brand = 'Benz';
  return {};
}

var car = new Car();
console.log(car.color);

9.2包装类

原始值并没有自己的方法和属性

数字是不是一定是原始值？
不一定，还可以通过 new Number() 将其变为对象

系统内置原始值共三种 new Number, new String, new Boolean

var a = 1;
console.log(a);
var b = new Number(a);// 经过 new 之后，就实例化了一个对象，数字对象
console.log(b); // 对象
// 成为对象之后就可以给其设置属性和方法
b.len = 1;
b.add = function(){
  console.log(1);
}
console.log(b);

// 经过 new 包装之后，再参与运算，又恢复到了初始值
var d = b + 1; // 2 

var aa = new Number(1);
console.log(aa); // 对象

var bb = aa + 1;
console.log(bb); // 2
console.log(aa); // 对象

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

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

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

var test = new Number(undefined); 
console.log(test);//NaN

var test = new Number(null); 
console.log(test);//0

var test = new String(undefined); 
console.log(test);// 'undefined'

null 和 undefined 不可以设置任何的属性和方法

console.log(null.length);  // 报错
console.log(undefined.length); // 报错

包装类案例

var a = 123; // 原始值 -> 数字   原始值没有方法和属性
a.len = 3;	// 但若非要相加，系统就会给你变成数字对象 new Number(123)
// new Number(123).len = 3; 赋值完之后new Number(123)这个值并没有地方保存 -> 所以删除了 delete
// 赋值之后没地方保存，就删除了

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

那么如何能够把 a.len 保存起来？

//包装类
var a = new Number(123);
a.len = 3;
console.log(a.len); // 3

原始值没有方法和属性，为什么str.length可以打印出来？

var str = 'abc';
console.log(str.length); // 3

系统内部 new String(str).length;
通过包装类访问到new String 独有的属性，这个时候不需要保存

数组的截断方法

var arr = [1, 2, 3, 4, 5];
arr.length = 3; // 赋值为几，就数几位留下来，后面的全部删除
arr; // [1, 2, 3];

arr.length = 6; //[1, 2, 3, 4, 5, empty] 多的部分会填 empty

字符串

var str = 'abc';
str.length = 1; // 系统会做 new String(str).length = 1;临时容器，没地方保存，delete
console.log(str); // 'abc'

console.log(str.length); // 3  这时候重新包装 new String(str).length

9.3面试题

var name = 'languiji';
name += 10; // 'languiji10'

var type = typeof(name); // 'string'

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

console.log(type.text); // undefined

如果想要输出type.text，则
var type = new String(typeof(name));

function Car(brand, color){
  this.brand = 'Benz';
  this.color = 'red';
}

var car = new Car('Mazda', 'blank');
console.log(car); // {brand: 'Benz', color: 'red'}

function Test(a, b, c) {
  var d = 1;
  this.a = a;
  this.b = b;
  this.c = c;
  
  function f(){
    d++;
    console.log(d);
  }
  this.g = f;
  // 隐式 return this; -> 闭包
}

var test1 = new Test();
test1.g(); // 2
test1.g(); // 3

var test2 = new Test();
test2.g(); // 2

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

GO = {
x: 1,
y: 0 -> 4,
z: 0 -> 4,
add: function add(n){returnn = n + 3;}
}

以下三个函数哪一个能够输出1，2，3，4，5

function foo1(x) {
  console.log(arguments);
  return x;
}
foo1(1, 2, 3, 4, 5);

function foo2(x) {
  console.log(arguments);
  return x;
}(1, 2, 3, 4, 5)

(function foo3(x) {
  console.log(arguments);
  return x;
})(1, 2, 3, 4, 5)

// 答：foo1, foo3

function b(x, y, a) {
  a = 10;
  console.log(arguments[2]);
}

b(1, 2, 3); // 10


function b(x, y, a) {
  arguments[2] = 10;
  console.log(a);
}

b(1, 2, 3); // 10

应用

ASCII码
表1：0 - 127
表2：128 - 255
ASCII码中的字符长度都是一个字节 byte UNICODE 码 涵盖
ASCII码 ：0-255为ASCII码，255之后为两个字节

var str = 'a';
var pos = str.charCodeAt(0); // 打印字符在UNICODE中是第几位
console.log(pos); // 97

写一个函数，接收任意一个字符串，算出这个字符串的总字节数

// 方法1
function compute(str) {
  var total = 0;
  for(var i = 0; i < str.length; i++) {
    var pos = str.charCodeAt(i);
    if(pos >= 0 && pos <= 255) {
      total += 1;
    } else {
      total += 2;
    }
  }
  return total;
}
console.log(compute('hello 中文!'));

// 方法2
function getBytes(str){
  var bytes = str.length; // 字符串长度
  for(var i = 0; i < str.length; i++) {
    var pos = str.charCodeAt(i);
    if(pos > 255){ // 如果是中文字符，bytes+1
      bytes++;
    }
  }
  return bytes;
}
console.log(compute('hello 中文!'));