wordpress纯静态网站,网站备案审批号,网站开发需求分析参考文献,网站建设需要多少钱JavaScript的static、this、super关键字介绍
static关键字#xff1a;
☆ static关键字用于定义类的静态方法和静态属性。
☆ 静态方法是直接与类相关联的方法#xff0c;不需要实例化类即可调用。
☆ 静态属性是类本身的属性#xff0c;而不是实例的属性。
☆ 在静态方…JavaScript的static、this、super关键字介绍
static关键字
☆ static关键字用于定义类的静态方法和静态属性。
☆ 静态方法是直接与类相关联的方法不需要实例化类即可调用。
☆ 静态属性是类本身的属性而不是实例的属性。
☆ 在静态方法内部不能使用this关键字来引用实例因为静态方法与特定实例无关。
this关键字
☆ this关键字指向当前执行代码的对象它是动态的根据上下文的不同而变化。
☆ 在类的方法中this指向调用该方法的实例对象。
☆ 在箭头函数中this指向定义该函数时的词法环境的this值而不是动态绑定到实例对象。
☆ 在构造函数中使用this关键字来设置实例的属性。
super关键字
☆ super关键字用于调用父类的构造函数和方法。
☆ 在子类的构造函数中可以使用super()来调用父类的构造函数完成父类的初始化。
☆ 在子类的方法中可以使用super.method()来调用父类的方法。
☆ 在子类中通过super关键字可以访问到父类的属性和方法。 static关键字
当在JavaScript中使用static关键字时可以定义静态方法和静态属性。下面是一些示例来说明如何使用static关键字。
1.定义静态方法
class MathUtils {static add(a, b) {return a b;}static multiply(a, b) {return a * b;}
}console.log(MathUtils.add(2, 3)); // 输出: 5
console.log(MathUtils.multiply(2, 3)); // 输出: 6在上面的示例中MathUtils类定义了两个静态方法add()和multiply()。这些方法可以直接通过类名调用而不需要实例化类。 2.定义静态属性
class Circle {static PI 3.14;constructor(radius) {this.radius radius;}get circumference() {return 2 * Circle.PI * this.radius;}
}const circle new Circle(5);
console.log(circle.circumference); // 输出: 31.4
console.log(Circle.PI); // 输出: 3.14在上面的示例中Circle类定义了一个静态属性PI它存储了圆周率的值。在实例方法circumference()中可以通过Circle.PI来访问静态属性。 需要注意的是在静态方法内部不能使用this关键字因为静态方法与特定实例无关。静态方法只能访问静态属性或调用其他静态方法。 通过使用static关键字我们可以在JavaScript中创建更具灵活性和可重用性的代码结构。 this关键字
在JavaScript中this关键字用于指向当前执行代码的对象。下面是一些示例来说明如何使用this关键字。
1.在方法中使用this
const person {name: John,greet() {console.log(Hello, my name is ${this.name}.);}
};person.greet(); // 输出: Hello, my name is John.在上面的示例中this关键字指向包含这个方法的对象person。通过this.name我们可以访问到对象的属性。 2.在构造函数中使用this
class Rectangle {constructor(width, height) {this.width width;this.height height;}getArea() {return this.width * this.height;}
}const rectangle new Rectangle(5, 3);
console.log(rectangle.getArea()); // 输出: 15在上面的示例中构造函数Rectangle使用this来设置实例的属性width和height。在实例方法getArea()中我们可以通过this来访问实例的属性。 需要注意的是在箭头函数中this关键字的行为有所不同。它不会根据调用方式或上下文而变化而是继承了定义该函数时的词法环境的this值。 3.在事件处理程序中使用this scriptdocument.addEventListener(DOMContentLoaded, function() {const button document.querySelector(button);button.addEventListener(click, function() {console.log(this); // 输出: buttonClick me/button});});/scriptbodybuttonClick me/button/body在上面的示例中this指向触发事件的元素即按钮元素。这样我们可以在事件处理程序中访问和操作该元素。 通过使用this关键字我们可以在JavaScript中引用当前上下文的对象从而实现更灵活和动态的编程。 super关键字
在JavaScript中super关键字用于调用父类的构造函数、方法和访问父类的属性。下面是一些示例来说明如何使用super关键字。
1.调用父类的构造函数
class Animal {constructor(name) {this.name name;}
}class Dog extends Animal {constructor(name, breed) {super(name); // 调用父类的构造函数this.breed breed;}
}const dog new Dog(Buddy, Golden Retriever);
console.log(dog.name); // 输出: Buddy
console.log(dog.breed); // 输出: Golden Retriever在上面的示例中Dog类继承了Animal类并在子类的构造函数中使用super(name)来调用父类的构造函数并传递参数。 2.调用父类的方法
class Animal {constructor(name) {this.name name;}speak() {console.log(${this.name} makes a sound.);}
}class Dog extends Animal {constructor(name, breed) {super(name);this.breed breed;}speak() {super.speak(); // 调用父类的speak()方法console.log(${this.name} barks.);}
}const dog new Dog(Buddy, Golden Retriever);
dog.speak();
// 输出:
// Buddy makes a sound.
// Buddy barks.在上面的示例中Dog类重写了父类的speak()方法并在子类的speak()方法中使用super.speak()来调用父类的speak()方法。 3.访问父类的属性
class Animal {constructor(name) {this.name name;}
}class Dog extends Animal {constructor(name, breed) {super(name);this.breed breed;}getDetails() {console.log(Name: ${this.name}, Breed: ${this.breed});}
}const dog new Dog(Buddy, Golden Retriever);
dog.getDetails(); // 输出: Name: Buddy, Breed: Golden Retriever在上面的示例中Dog类通过super(name)来访问父类Animal的属性name。 通过使用super关键字我们可以在JavaScript中实现继承和访问父类的构造函数、方法和属性。
