本文主要是介绍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 构造函数继承

• 使用call()将父类构造函数引入子类函数

// 定义父类型构造函数
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基础的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！