本文主要是介绍JavaScript基础,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. 数据类型
1.1 数据分类
- 字符串型
- 数值型
- 布尔型
- undefined型
- null型
- Object类型
1.2 查看数据类型
typeof 变量或常量
1.3 将变量转换为String类型
var str=变量.toString()
var str=String(变量)
var str=变量+""
1.4 将字符串转换为Number类型
var num=paraseInt(字符串)
var num=paraseFloat(字符串)
var num=Number(字符串);
var num=Number(bool类型变量);
var num=Number(null类型变量);
var num=Number(undefined类型变量)
1.5 转换为Boolean类型
var bool=Boolean(参数)
1.6 比较运算符
- === 类型要相同,取值也要相同(不会自动类型转换)
- !== 不全等运算
- 基本类型的比较是值比较
2. 对象
2.1 对象的创建
var person = new Object();
person.name = "孙悟空";
person.age = 18;
console.log(person);
var person = {
name: "孙悟空",
age: 18
};
console.log(person);
2.2 访问和删除属性
对象.属性名
对象[‘属性名’]
delete 对象.属性名
2.3 遍历对象
for (var 变量 in 对象) {
}
2.4 栈与堆
- 基本数据类型和对象的引用分配在栈上
- 对象类型分配在堆上
3. 函数
3.1 创建
var 函数名 = new Function("执行语句");
function 函数名([形参1,形参2,...,形参N]) {
语句...
}
var 函数名 = function([形参1,形参2,...,形参N]) {
语句....
}
3.2 构造函数创建对象
// 使用构造函数来创建对象
function Person(name, age) {
// 设置对象的属性
this.name = name;
this.age = age;
// 设置对象的方法
this.sayName = function () {
console.log(this.name);
};
}
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);
console.log(person1);
console.log(person2);
console.log(person3);
- 构造函数跟普通函数很像
- 构造函数一般首字母大小
- 构造函数调用用new关键字,用来生成对象
- 构造函数里面可以通过this引用新建对象
3.3 this在不同函数里面代表什么
- 当以函数的形式调用时,this代表window
- 当以方法的形式调用时,谁调用方法this就代表谁
- 当以构造函数的形式调用时,this就是新创建的哪个对象
4. 原型
4.1 为什么需要有原型
- 当一个构造函数确定了之后,我们如何将这个构造器添加新的方法和属性
// 使用构造函数来创建对象
function Person(name, age) {
// 设置对象的属性
this.name = name;
this.age = age;
}
// 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {
console.log(this.name);
};
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);
person1.sayName();
person2.sayName();
person3.sayName();
4.2 原型链
- 每个对象都会有原型
- 原型也是一个对象,所以原型对象也会有它的原型对象
- 因此原型会形成一个原型链
- Object对象所有对象的祖宗,Object的原型对象指向为null,也就没有原型对象
- 如果一个构造器没有指定原型,则原型就默认为Object的实例对象
- 一个对象的的原型链上的属性和方法对这个对象来说都可见
4.3 对象的常用方法
- toString方法:继承自Object对象
- hasOwnProperty(name):查看当前对象是否拥有某个属性和方法(而非原型链上的)
5. 对象继承
5.1 原型链继承
// 定义父类型构造函数
function SupperType() {
this.supProp = 'Supper property';
}
// 给父类型的原型添加方法
SupperType.prototype.showSupperProp = function () {
console.log(this.supProp);
};
// 定义子类型的构造函数
function SubType() {
this.subProp = 'Sub property';
}
// 创建父类型的对象赋值给子类型的原型
SubType.prototype = new SupperType();
// 将子类型原型的构造属性设置为子类型
SubType.prototype.constructor = SubType;
// 给子类型原型添加方法
SubType.prototype.showSubProp = function () {
console.log(this.subProp)
};
// 创建子类型的对象: 可以调用父类型的方法
var subType = new SubType();
subType.showSupperProp();
subType.showSubProp();
- 子类多个实例对象的原型指向同一个原型对象,一个子类对象修改了原型属性,其他所有的子类对象的原型属性也会修改
- 不能传递参数
- 基础单一
5.2 构造函数继承
// 定义父类型构造函数
function SuperType(name) {
this.name = name;
this.showSupperName = function () {
console.log(this.name);
};
}
// 定义子类型的构造函数
function SubType(name, age) {
// 在子类型中调用call方法继承自SuperType
SuperType.call(this, name);
this.age = age;
}
// 给子类型的原型添加方法
SubType.prototype.showSubName = function () {
console.log(this.name);
};
// 创建子类型的对象然后调用
var subType = new SubType("孙悟空", 20);
subType.showSupperName();
subType.showSubName();
console.log(subType.name);
console.log(subType.age);
5.3 组合继承
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.setName = function (name) {
this.name = name;
};
function Student(name, age, price) {
Person.call(this, name, age); // 为了得到父类型的实例属性和方法
this.price = price; // 添加子类型私有的属性
}
Student.prototype = new Person(); // 为了得到父类型的原型属性和方法
Student.prototype.constructor = Student; // 修正constructor属性指向
Student.prototype.setPrice = function (price) { // 添加子类型私有的方法
this.price = price;
};
var s = new Student("孙悟空", 24, 15000);
console.log(s.name, s.age, s.price);
s.setName("猪八戒");
s.setPrice(16000);
console.log(s.name, s.age, s.price);
这篇关于JavaScript基础的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!