1. 对象的构成

  • 属性 + 方法

    1. var teacher = {
    2.   name: "Tom",
    3. age: 32,
    4. sex: "male",
    5. weight: 130,
    6. teach: function() {
    7.     console.log("I am teaching JavaScript")
    8. }
    9. }

    2. 对象的操作

  • 查

  • 增
  • 改
  • 删 delete teacher.sex; delete teacher.teach;

    3. this

    例1：
    1. var teacher = {
    2.   name: "Tom",
    3. age: 32,
    4. sex: "male",
    5. weight: 130,
    6. teach: function() {
    7.     console.log("I am teaching JavaScript")
    8. },
    9. smoke: function() {
    10.   // teacher.weight -- 
    11.     this.weight --;
    12.   // console.log(teacher.weight);
    13.   console.log(this.weight);
    14. },
    15. eat: function() {
    16.   // teacher.weight ++ 
    17.     this.weight ++;
    18.   // console.log(teacher.weight);
    19.   console.log(this.weight);
    20. }
    21. }
    例2：课堂考勤管理
    1. var attendance = {
    2.   students: [],
    3. total: 6,
    4. join: function(name) {
    5.     this.students.push(name);
    6.   if (this.students.length === this.total) {
    7.     console.log(name + "到课，学生已到齐");
    8.   } else{
    9.     console.log(name + "到课，学生未到齐");
    10.   }
    11. },
    12. leave: function(name) {
    13.   var idx = this.students.indexOf(name)
    14.     if( idx !== -1) {
    15.       this.students.splice(idx, 1)
    16.   }
    17.   console.log(name + "早退")
    18.   console.log(this.students);
    19. }，
    20. classOver: function () {
    21.     this.students = [];
    22.   console.log("已下课")
    23. }
    24. }

    4. 构造函数创建对象

    4.1 系统自带的构造函数

    与对象字面量没有区别 ```javascript // 对象字面量 var teacher = { name: “Tom”, age: 32, } obj.age = 28;

// 自带的Object构造函数 var obj = new Object(); obj.name = “Tom”; obj.age = 23;

  1. <a name="x5vBc"></a>
  2. #### 4.2 自定义构造函数
  4. - 大驼峰
  5. ```javascript
  6. function Teacher() {
  7.     this.name = "Tom";
  8.   this.sex = "male";
  9.   this.weight = 100;
  10.   this.eat = function () {
  11.     this.weight += 2;
  12.     console.log(this.weight)
  13.   }
  14. }
  16. var teacher = new Teacher();
  18. // 构造函数传参
  19. function Teacher(opt) {
  20.     this.name = opt.name;
  21.   this.sex = opt.sex;
  22.   this.weight = opt.weight;
  23.   this.eat = function () {
  24.     this.weight += 2;
  25.     console.log(this.weight)
  26.   }
  27. }
  29. var teacher = new Teacher({name: "张三", sex: "male", weight: 112})
  • 构造函数生成的对象是独立的，对象A属性的改变不会影响对象B
  • 正式开发时构造函数需使用opt对象来传参

    5. 构造函数与实例化原理

    ```javascript function Car(color, brand) { // this = {}; this.color = color; this.brand = brand; // return this; }

var car1 = new Car(‘red’, ‘Benz’);

GO = { Car: (function), car1: Car{color: ‘red’, brand: ‘Benz’} }

AO = { this: {}, // 当使用new关键字执行时，自动在AO中创建一个this对象 }

  1. **this指向问题**
  3. - 未执行时， this无意义
  4. - 作为普通函数执行时`Car()`，this为window
  5. - 作为构造函数执行时`new Car()`，会在AO中创建一个新的对象，并将this指向这个对象，函数执行结束后返回这个对象，即**改变this指向**
  9. **构造函数返回值**
  11. - 未指定返回值时，自动返回实例化对象
  12. - 指定返回值时
  13.    - 当返回原始值，无效，还是返回实例化对象
  14.    - 当返回引用值时（对象，数组，函数），返回该引用值
  16. <a name="hQC2z"></a>
  17. ### 6 包装类
  18. ```javascript
  19. // 原始值没有自己的属性和方法
  20. var a = 1;  // a 是原始值
  21. a.len = 3;  // new Number(a).len = 3; delete
  22. a.len // undefined
  24. // 数字不一定都是原始值
  25. var b = new Number(a);  // b 是对象，可以设置 属性和方法
  26. b.len = 3;
  27. b  // Number(1, len: 3)
  29. // Number 对象可以参与运算，返回原始值
  30. var c = b + 1; 
  31. c // 2
  33. // String
  34. var str = 'abc';
  35. console.log(str.length)  // console.log(new String(str).length) -> 3
  36. str.length = 1;  // new String(str).length = 1; delete;
  37. console.log(str.length)  // console.log(new String(str).length) -> 3

系统内置的三个包装类
Number(), String(), Boolean()

7. 练习

  1. 写一个构造函数，接收数字类型的参数，参数数量不定，完成参数相加和相乘的功能。 ```javascript // 方法1 function Compute() { var args = arguments, res; this.getSum = function() { res = 0; for(var i = 0; i < args.length; i++) { res += args[i] } console.log(res) };

    this.getProduct = function() { res = 1; for(var i = 0; i < args.length; i++) { res *= args[i] } console.log(res) } }

// 方法2 function Compute() { var args = arguments;

function loop(method, res) { for(var i = 0; i < args.length; i++) { var item = args[i]; if(method === ‘add’) { res += item } else if (method === “mul”) {res *= item} } console.log(res) }

this.getSum = function() { loop(“add”, 0); };

this.getProduct = function() { loop(“mul”, 1); } }

var compute = new Compute(1, 2, 3, 4, 5); compute.getSum(); compute.getProduct();

// 方法3 function Compute() {
function loop(args, method, res) { for(var i = 0; i < args.length; i++) { var item = args[i]; if(method === ‘add’) { res += item } else if (method === “mul”) {res *= item} } console.log(res) }

this.getSum = function() { loop(arguments, “add”, 0); };

this.getProduct = function() { loop(arguments, “mul”, 1); } } var compute = new Compute(); compute.getSum(2, 4, 6); compute.getProduct(3, 5, 7);

  2. 2. 消费者与车
  4. 写一个构造车的函数，可设置车的品牌，颜色，排量；再写一个构造消费者的函数，设置用户的名字，年龄，收入，通过选择的方法实例化该用户喜欢的车，再设置车的属性。
  5. ```javascript
  6. function Car(opt) {
  7.     this.brand = opt.brand;
  8.   this.color = opt.color;
  9.   this.capacity = opt.capacity;
  10. }
  12. function Consumer(opt) {
  13.     this.name = opt.name;
  14.   this.age = opt.age;
  15.   this.income = opt.income;
  17.   this.selectCar = function() {
  18.       this.favorCar = new Car(opt.carOpt);
  19.     console.log(this.favorCar)
  20.   }
  21. }
  23. var consumer = new Consumer({
  24.   name: "Alex", 
  25.   age: 32, 
  26.   income: 100000, 
  27.   carOpt: {
  28.     brand: 'Tesla', 
  29.     color: "silver", 
  30.     capacity: 20
  31.   } 
  32. });
  33. consumer.selectCar()

  1. 构造函数与闭包 ```javascript function Test(a, b) { var c = 1; this.a = a; this.b = b;

    function f() { c++; console.log(c); }

    this.g = f; }

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

  2. 4. 预编译
  3. ```javascript
  4. var x = 1, y = z = 0;
  6. function add(n) {
  7.     return n = n + 1;
  8. }
  10. y = add(x);
  12. function add(n) {
  13.     return n = n + 3;
  14. }
  16. z = add(x);
  18. console.log(x, y, z)  // 1, 4, 4
  1. 立即执行函数 ```javascript 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); // 5

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

  2. 6. 形参实参映射
  3. ```javascript
  4. function b(x, y, a) {
  5.   a = 10;
  6.   console.log(arguments[2]);  // 10
  8.   arguments[2] = 10;
  9.   console.log(a);  // 10
  10. }
  11. b(1, 2, 3)

ASCII码：表1： 0-127， 表2： 128-255 一个字节 byte
UNICODE码，涵盖ASCII码， 2个字节

  1. var str = 'a';
  3. // string.charCodeAt()  -> 返回字符串某位置上字符的unicode码
  4. var pos = str.charCodeAt(0);
  6. pos // 97

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

  1. function getBytes(str) {
  2.   var bytes = 0;
  3.     for(var i = 0; i < str.length; i++) {
  4.       var charCode = str.charCodeAt(i);
  5.     if (charCode <= 255) {
  6.         bytes += 1;
  7.     } else {
  8.         bytes += 2;
  9.     }
  10.   }
  12.   return bytes;
  13. }
  15. getBytes("Tom, 你好，我是Alex");  // 19

8. 其他

  1. 数组的截断方法
    1. var arr = [1, 2, 3, 4, 5]
    2. arr.length = 3;
    3. console.log(arr) // [1, 2, 3]