【ECMAScript】构造函数原理、实例化原理、包装类1. 构造函数2. 包装类3. 面试题4. ASCII码5. 作业

59 阅读 0 评论 39 点赞

我是靠谱客的博主过时微笑，最近开发中收集的这篇文章主要介绍【ECMAScript】构造函数原理、实例化原理、包装类1. 构造函数2. 包装类3. 面试题4. ASCII码5. 作业，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1. 构造函数

new 做了什么：把 this 造出来，改变 this 指向，指向实例化对象

GO = {
Car: (function),
car1: {
color: 'red',
brand: 'Benz'
}
}
AO = {
// this: {}, // 1. 执行到new，在AO里保存一个空的this对象
this: {
// 2. 保存值到 this 对象
color: color,
brand: brand
}
}
function Car(color, brand) {
// 当被实例化时，产生AO，自动保存this为对象
// this = {color: color, brand: brand} 
this.color = color;
this.brand = brand;
// return this;
// 3. 隐式的 return this
}
// 当 Car 被实例化时，就相当于普通函数被执行的时候，这个时候 Car 也有 AO
// new Car的时候把返回的this交给了car1，所以说最终还是保存到GO中了
var car1 = new Car('red', 'Benz'); // 这里返回的是 this，所以 this 就是 car1
console.log(car1.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);

2. 包装类

原始值并没有自己的方法和属性，所以没有a.属性

var a = 1;
var b = 'abc';

问：数字是不是一定是原始值？

答：不一定，还可以通过 new Number() 将其变为对象

var a = 1;
console.log(a);
var b = new Number(a); // 经过 new 之后，就实例化了一个对象，数字对象
console.log(b); // 对象
// 成为对象之后就可以给其设置属性和方法
b.len = 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); // 对象

new Number, new String, new Boolean

var test = new Number(undefined); // NaN
var test = new Number(null); // 0
var test = new String(undefined); // 'undefined'
// null 和 undefined 不可以设置任何的属性和方法
null.length;
// 报错
undefined.length; // 报错

包装类案例⭐

// JS 包装类
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可以打印出来⭐

// 原始值没有方法和属性，为什么str.length可以打印出来
var str = 'abc';
str.length; // 3
系统内部 new String(str).length;
通过包装类访问到new String 独有的属性，这个时候不需要保存

数组可以被length属性截断

var arr = [1, 2, 3, 4, 5];
// 数组的截断方法
arr.length = 3; // 赋值为几，就数几位留下来，后面的全部删除
arr; // [1, 2, 3];
arr.length = 6; // 多的部分会填 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

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){return n = 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

4. 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

5. 作业

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

// 方法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 中文!'));