文章目录
参考教程 W3school_javascript
本文内容重点：js作用域、闭包、继承、面向对象设计
js基础
显示方案
window.alert()
document.write()
innerHTML
console.log()
// 直接放在HTML里面，一般测试的时候用
<script>
document.write(5 + 6);
</script>
计算
var x = 3 + 5 + '8'
// x 是 '88'
// 当数值和字符串相加时，JavaScript 将把数值视作字符串
// 但是顺序对结果有影响
var x = 911 + 7 + "Porsche"; //918Porsche
var x = "Porsche" + 911 + 7; //Porsche9117
数据类型
字符串值，数值，布尔值，数组，对象
typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象。
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
// 科学计数法
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
JavaScript 数值始终是 64 位的浮点数(双精度浮点数)
对象
var car = {type:"porsche", model:"911", color:"white"};
// 在函数定义中，this 引用该函数的“拥有者”
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
person.lastName;
person["lastName"];
name = person.fullName();
new
new生成的是对象
var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object
字符串方法
length 属性返回字符串的长度
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引
search() 方法搜索特定值的字符串，并返回匹配的位置
有三种提取部分字符串的方法：
slice(start, end)
substring(start, end)
substr(start, length)
substring() 无法接受负的索引，slice()可以
replace() 方法用另一个值替换在字符串中指定的值
toUpperCase() 把字符串转换为大写
toLowerCase() 把字符串转换为小写
concat() 连接两个或多个字符串
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
trim() 方法删除字符串两端的空白符
charAt() 方法返回字符串中指定下标（位置）的字符串，类似[]
split() 字符串分割
js作用域
讲的很清楚，有代码有说明
js作用域与执行环境（前端基础系列）
对象
在 JavaScript 中，几乎“所有事物”都是对象
布尔是对象（如果用 new 关键词定义）
数字是对象（如果用 new 关键词定义）
字符串是对象（如果用 new 关键词定义）
日期永远都是对象
算术永远都是对象
正则表达式永远都是对象
数组永远都是对象
函数永远都是对象
对象永远都是对象
对象易变
通过引用来寻址，而非值。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"}
var x = person; // x就是person，x和person是相同的对象
x.age = 10; // 这将同时改变 x.age 和 person.age
//新增属性
person.nationality = "English";
//改变属性
person.eyeColor= "black";
//删除属性
delete person.age;
遍历对象
var person = {fname:"Bill", lname:"Gates", age:62};
for (x in person) {
txt += person[x];
}
对象方法
<script>
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
person.name = function() {
return this.firstName + " " + this.lastName;
};
document.getElementById("demo").innerHTML = "My friend is " + person.name();
document.getElementById("demo").innerHTML = "My friend is " + person.fullName ();
</script>
对象访问器
var person = {
firstName: "Bill",
lastName : "Gates",
language : "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
person.lang = "en"; //person.language被设置为en
var person = {
firstName: "Bill",
lastName : "Gates",
language : "en",
get fName() {
return this.firstName + " " + this.lastName;
},
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// 以函数形式访问 fullName：person.fullName()
// 以属性形式访问 fName.fName
对象构造器
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.changeName = function (name) {
this.lastName = name;
};
}
var myFather = new Person("Bill", "Gates", 62, "blue");
myFather.changeName("Jobs");
无法为已有的对象构造器添加新属性,如需向构造器添加一个新属性，则必须把它添加到构造器函数,JavaScript ```prototype````属性允许您为对象构造器添加新属性
Person.prototype.nationality = "English";
函数
定义
// example1
function functionName(parameters) {
// 要执行的代码
}
//example2
var x = function functionName(parameters) {
// 要执行的代码
}
var z = x(params);
非表达式定义的函数会被提升（Hoisting ，是 JavaScript 将声明移动到当前作用域顶端的默认行为）
myFunction(5);
function myFunction(y) {
return y * y;
}
函数自调用
自调用可用来设置变量的块级作用域
(function () {
var x = "Hello!!"; //我会调用我自己
})();
箭头函数
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
const x = (x, y) => { return x * y };
箭头函数没有自己的 this。它们不适合定义对象方法。
箭头函数未被提升。它们必须在使用前进行定义。
使用 const 比使用 var 更安全，因为函数表达式始终是常量值。
参数
JavaScript 函数不会对参数值进行任何检查，如数据类型，参数数量
如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。
// 给参数设定默认值
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
JavaScript 函数有一个名为 arguments对象的内置对象，arguments 对象包含函数调用时使用的参数数组。
x = sumAll(1, 123, 500, 115, 44, 88);
function sumAll() {
var i, sum = 0;
for (i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
如果函数改变了参数的值，它不会改变参数的原始值。参数的改变在函数之外是不可见的。
this
在 JavaScript 中，被称为 this 的事物，指的是“拥有”当前代码的对象。
call()
通过 call()，您能够使用属于另一个对象的方法。
var person = {
firstName:"Bill",
lastName: "Gates",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
person.fullName();
fullName 属性是一个方法。person 对象是该方法的拥有者。
fullName 属性属于 person 对象的方法。
在 JavaScript 中，函数是对象的方法。如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数。
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
apply()
apply() 方法与 call() 方法非常相似
call()方法分别接受参数。
apply()方法接受数组形式的参数。
person.fullName.apply(person1, ["Oslo", "Norway"]);
person.fullName.call(person1, "Oslo", "Norway");
Math.max()
小技巧：可用Math.max()找到数组的最大值
Math.max(1,2,3); // 会返回 3
Math.max.apply(null, [1,2,3]); // 也会返回 3
Math.max.apply(Math, [1,2,3]); // 也会返回 3
Math.max.apply(" ", [1,2,3]); // 也会返回 3
// 第一个参数（null）无关紧要。在本例中未使用它。
全局&局部变量
函数能够访问函数内部定义的所有变量
function myFunction() {
var a = 4; //a是局部变量
return a * a;
}
函数也能访问函数外部定义的变量
var a = 4; //a是全局变量
function myFunction() {
return a * a;
}
在网页中，全局变量属于 window 对象。
全局变量能够被页面中（以及窗口中）的所有脚本使用和修改。
局部变量只能用于其被定义的函数内部。对于其他函数和脚本代码来说它是不可见的。
拥有相同名称的全局变量和局部变量是不同的变量。修改一个，不会改变其他。
不通过关键词 var 创建的变量总是全局的，即使它们在函数中创建。
全局变量活得和您的应用程序（窗口、网页）一样久。
局部变量活得不长。它们在函数调用时创建，在函数完成后被删除。
闭包
JavaScript 变量属于本地或全局作用域。全局变量能够通过闭包实现局部（私有）。
闭包指的是有权访问父作用域的函数，即使在父函数关闭之后。
var add = (function () {
var counter = 0; //初始化计数器
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器目前是 3
继承
等我学会了再来写吧，放个详细贴
web前端开发必懂之一：JS继承和继承基础总结