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

  1. function Car(){
  2. var a=1;//实例对象中没有a,因为a没有随this一块被返回
  3. this.color='red';
  4. //window.color='red'
  5. }
  6. Car()
  7. console.log(color)//red window.color

函数运行了就有this指向,不运行没有this指向,没有实例化,只运行函数this指向window
构造函数也是函数

  1. function Car(){
  2. this.color='red';
  3. }
  4. var car1=new Car();
  5. console.log(car1.color)//red

this指向car1,指向实例化对象
谁.就是指向谁
this指向对象,window对象、car1对象等,不指向函数本身

  1. /**
  2. * GO = {
  3. * Car: function () {...}
  4. * car1: {
  5. * color: 'red',
  6. * brand: 'Benz'
  7. * }
  8. * }
  9. * AO = {
  10. * this: {
  11. color: color,
  12. brand: brand
  13. }
  14. * }
  15. */
  16. function Car(color, brand) {
  17. /**
  18. * this = {
  19. * color: color,
  20. * brand: brand,
  21. AO
  22. * }
  23. *
  24. * return this;
  25. */
  26. this.color = color;
  27. this.brand = brand;
  28. }
  29. var car1 = new Car('red', 'Benz');
  30. console.log(car1.color);

第一步:new实例化,函数也运行,预编译AO出现,AO看见this,先
AO={this:{} }
第二步:看见this.color,this.brand,在this中填入color、brand及其值
第三步:隐式返回this,return this
这个this是对象
new语句是为了隐式返回一个this,return this

相当于:

  1. function Car(color, brand) {
  2. var me = {};
  3. me.color = color;
  4. me.brand = brand;
  5. return me;
  6. /**
  7. * me = {
  8. * color: color,
  9. * brand: brand,
  10. AO: 有AO,函数中有AO
  11. * }
  12. */
  13. }
  14. var car = Car('red', 'Mazda');
  15. console.log(car.color);
  16. console.log(car.brand);

不需要new,也新建了对象
构造函数与普通函数没有任何区别,没有声明区别

相当于

  1. function test(){
  2. var obj={
  3. name:'a',
  4. color:'blue'
  5. }
  6. return obj;
  7. }
  8. var obj1=test();
  9. console.log(obj1)
  1. function test(name,color){
  2. var obj={
  3. name:name,
  4. color:color
  5. }
  6. return obj;
  7. }
  8. var obj1=test('a','blue');
  9. console.log(obj1)

返回一个对象就是构造函数

  1. // 如果 return 的不是原始值,将会被返回,否则,隐式返回this
  2. function Car() {
  3. this.color = 'red';
  4. this.brand = 'Benz';
  5. return {};
  6. }
  7. var car1 = new Car();
  8. console.log(car1);

return原始值,返回this
return引用值,返回引用值

二、包装类

原始值没有自己的属性和方法。
null、undefined不可以设置属性和方法。
1.Number
2.String
3.Boolean
系统内置构造函数new Number,new String…

  1. var a = 1; // 原始值
  2. var b = new Number(a);
  3. b.length = 1;
  4. b.add = function () {
  5. console.log(1);
  6. }
  7. var d = b + 1;
  8. console.log(b); // 2
  9. var a = 'abc';
  10. console.log(a);
  11. var aa = new String('abc');
  12. console.log(aa);
  13. var bb = aa + 'bcd';
  14. console.log(bb);
  15. var a = 123;
  16. a.len = 3;
  17. /*
  18. new Number(123).len = 3 delete
  19. 因为没有赋值变量保存这个值,所以就删除了
  20. */
  21. console.log(a.len); // undefined
  22. // str -> length
  23. // console.log(new String(str).length)
  24. var str = 'abc';
  25. console.log(str.length);
  26. // 截断数组
  27. var arr = [1, 2, 3, 4, 5];
  28. arr.length = 3;
  29. console.log(arr);

原始值隐式转换成相应的对象,

三、面试题

  1. /**
  2. * GO = {
  3. * name: undefined -> 'hello' -> 'hello10'
  4. * type: undefined -> 'string'
  5. * }
  6. */
  7. var name = 'hello';
  8. name += 10;
  9. var type = typeof (name);
  10. if (type.length === 6) {
  11. // new String(type)
  12. // type.text = 'string'
  13. // delete
  14. type.text = 'string';
  15. }
  16. console.log(type.text); // undefined
  17. //----------------------------------------------------------------
  18. function Test(a, b, c) {
  19. var d = 1;
  20. this.a = a;
  21. this.b = b;
  22. this.c = c;
  23. this.f = function () {
  24. d++;
  25. console.log(d);
  26. }
  27. // return this; 形成闭包
  28. }
  29. var test1 = new Test();
  30. var test2 = new Test();
  31. test1.f();
  32. test1.f();
  33. test2.f();
  34. //----------------------------------------------------------------
  35. /**
  36. * GO = {
  37. * x: undefined -> 1
  38. * y: undefined -> 0 -> 4
  39. * z: 0 -> 4
  40. * add: function () { return n = n + 1 } -> function () { return n = n + 3 }
  41. * }
  42. */
  43. var x = 1,
  44. y = z = 0;
  45. function add(n) {
  46. return n = n + 1;
  47. }
  48. y = add(x);
  49. function add(n) {
  50. return n = n + 3;
  51. }
  52. z = add(x);
  53. console.log(x, y, z); // 1, 4, 4
  54. //---------------------------------------------------------------------
  55. function foo1(x) {
  56. console.log(arguments);
  57. return x;
  58. }
  59. foo(1, 2, 3, 4, 5); // 1,2,3,4,5
  60. function foo2(x) {
  61. console.log(arguments);
  62. return x;
  63. } (1, 2, 3, 4, 5); // 不会执行 (1, 2, 3, 4, 5)是表达式
  64. (function foo3(x) {
  65. console.log(arguments);
  66. return x;
  67. })(1, 2, 3, 4, 5); // 1,2,3,4,5
  68. //---------------------------------------------------------------------
  69. // 映射关系
  70. function b(x, y, a) {
  71. // a = 10;
  72. // console.log(arguments[2]);
  73. arguments[2] = 10;
  74. console.log(a); // 10
  75. }
  76. b(1, 2, 3);

四、作业

写一个函数,接收任意一个字符串,返回这个字符串的总字节数

  1. function getBytes(str) {
  2. var str = String(str);
  3. var bytes = 0;
  4. var length = str.length;
  5. for (var i = 0; i < length; i++) {
  6. if (str.charCodeAt(i) > 255) {
  7. bytes += 2;
  8. } else {
  9. bytes += 1;
  10. }
  11. }
  12. return bytes;
  13. }
  14. console.log(getBytes('你好哈哈'));