liang14658fox

Appearance

The quarterly results look great! ​

  • Revenue was off the chart.
  • Profits were higher than ever.

Everything is going according to plan.

普通函数 ​

  • 函数的作用

  • 声明函数，并使用

js
function fn(param1 , param2 , ... , paramN ) {
    // 函数体
    return expression;
}
function fn(param1 , param2 , ... , paramN ) {
    // 函数体
    return expression;
}
js
var fn = function() {
     // 函数体
    return expression;
}
console.log(typeof fn);
var fn = function() {
     // 函数体
    return expression;
}
console.log(typeof fn);

类 ​

  • 类的作用

  • 创建类，并使用

js
class Student {  // 类名 ClassName = Student
    // 构造函数，名为 constructor 的方法
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}
class Student {  // 类名 ClassName = Student
    // 构造函数，名为 constructor 的方法
    constructor(uname, age, major) {
        this.uname = uname;
        this.age = age;
        this.major = major;
    }
    // 类中添加方法
    sing() {
        console.log(this.uname + "会唱歌");
    }
}

构造函数 ​

  • 构造函数的作用

构造函数 是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值。

它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

  • 声明构造函数，并使用
js
function Person(uname,age,sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      console.log('说哈喽')
    }
}
var bigbai = new Person('大白',10,'男')
function Person(uname,age,sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      console.log('说哈喽')
    }
}
var bigbai = new Person('大白',10,'男')

静态成员 实例成员 ​

JavaScript 的构造函数中可以添加一些成员，可以在构造函数本身上添加，也可以在构造函数内部的 this 上添加。通过这两种方式添加的成员，就分别称为 静态成员 和 实例成员。

  • 静态成员：在构造函数本上添加的成员称为 静态成员，只能由构造函数本身来访问
  • 实例成员：在构造函数内部创建的对象成员称为 实例成员，只能由实例化的对象来访问
js
function Human(uname, age) {
    this.uname = uname;
    this.age = age;
}
Human.x = 10; // 静态成员
let rick = new Human("rick", 35);
// console.log(rick.x); // 实例化的对象不能调用静态成员
console.log(Human.x); // 静态成员只能由构造函数本身来访问
function Human(uname, age) {
    this.uname = uname;
    this.age = age;
}
Human.x = 10; // 静态成员
let rick = new Human("rick", 35);
// console.log(rick.x); // 实例化的对象不能调用静态成员
console.log(Human.x); // 静态成员只能由构造函数本身来访问
js
//给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用。
class Person {
    static eat() {
        console.log('eat');
    }
}
let  p = new Person();
Person.eat(); // eat
p.eat(); // 报错
//给成员属性或成员方法添加 static，该成员就成为静态成员，静态成员只能由该类调用。
class Person {
    static eat() {
        console.log('eat');
    }
}
let  p = new Person();
Person.eat(); // eat
p.eat(); // 报错

原型链 ​

prototype

添加 functin 后的原型链 ​

prototype_2

构造函数原型对象 prototype ​

构造函数方法很好用，但是 存在浪费内存的问题。

js
//举个例子，为什么浪费内存
function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
        console.log('我会唱歌');
    }
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);
//举个例子，为什么浪费内存
function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
        console.log('我会唱歌');
    }
}
var ldh = new Star('刘德华', 18);
var zxy = new Star('张学友', 19);

函数内容一样的函数（sing()），会在内存中产生两份，占两份空间。 我们希望 所有的对象使用同一个函数，这样就比较节省内存，于是就有了构造函数原型 prototype。

构造函数原型对象 prototype 是构造函数的一个属性，是对象类型 这个对象的所有属性和方法，都会被构造函数所拥有。我们可以 把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

js
//声明构造函数
function Person(uname,age,sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      console.log('说哈喽')
    }
}
Person.prototype.sing = function() { 
    console.log('唱歌')
}
//声明构造函数
function Person(uname,age,sex) {
     this.name = name;
     this.age = age;
     this.sex = sex;
     this.sayHi = function() {
      console.log('说哈喽')
    }
}
Person.prototype.sing = function() { 
    console.log('唱歌')
}

prototype 的 constructor 属性 ​

constructor 是 构造函数原型对象 prototype 的一个属性，称为构造函数，这个属性用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。

js
Person.prototype = {
    constructor : Person,
    sing : function() {
        console.log('唱歌')
    }
}
let rick = new Person('rick',35)
console.log(Object.getPrototypeOf(rick).constructor) //constructor指向构造函数Person本身
// Person(uname,age) { ... }
Person.prototype = {
    constructor : Person,
    sing : function() {
        console.log('唱歌')
    }
}
let rick = new Person('rick',35)
console.log(Object.getPrototypeOf(rick).constructor) //constructor指向构造函数Person本身
// Person(uname,age) { ... }

原型链有什么用？具体的应用场景是什么？ ​

  • 原型链是JavaScript中一种面向对象的技术，它允许一个构造函数创建一个对象，而这个对象可以从另一个对象继承属性。
  • 原型链的本质就是对象的继承，它可以让我们用很少的代码达到类似继承的效果。 原型链的作用是提供一种继承机制，使得开发者可以重复使用同一份代码，从而提高代码的可重用性，减少重复编写代码的工作量。
  • 它可以让我们在不修改原型链上的任何对象的情况下，添加新功能或者属性到一个对象上，从而提高代码的可维护性。

原型链举例：

js
例子：

// 定义一个Person构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 添加一个sayName方法
Person.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};
 
// 定义一个Student构造函数，继承Person构造函数
function Student(name, age, school) {
  Person.call(this, name, age);
  this.school = school;
}
 
// 让Student的原型继承Person的原型
Student.prototype = Object.create(Person.prototype);
 
// 重新设置Student的构造函数
Student.prototype.constructor = Student;
 
// 添加一个study方法
Student.prototype.study = function() {
  console.log('I am studying at ' + this.school);
};

// 创建一个Student实例
var student = new Student('Tom', 18, 'MIT');
 
// 调用Student实例的sayName方法
student.sayName(); // My name is Tom
 
// 调用Student实例的study方法
student.study(); // I am studying at MIT
例子：

// 定义一个Person构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 添加一个sayName方法
Person.prototype.sayName = function() {
  console.log('My name is ' + this.name);
};
 
// 定义一个Student构造函数，继承Person构造函数
function Student(name, age, school) {
  Person.call(this, name, age);
  this.school = school;
}
 
// 让Student的原型继承Person的原型
Student.prototype = Object.create(Person.prototype);
 
// 重新设置Student的构造函数
Student.prototype.constructor = Student;
 
// 添加一个study方法
Student.prototype.study = function() {
  console.log('I am studying at ' + this.school);
};

// 创建一个Student实例
var student = new Student('Tom', 18, 'MIT');
 
// 调用Student实例的sayName方法
student.sayName(); // My name is Tom
 
// 调用Student实例的study方法
student.study(); // I am studying at MIT