js类和对象
2018-06-26 本文已影响0人
十一_2bef
函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建函数的方式一：
* - 使用函数声明来创建一个函数
* - 语法：
* function 函数的名字([形参1,形参2,...形参n]){
* 语句...
* }
*/
//创建一个函数
function fun(){
console.log("语句一");
console.log("语句二");
console.log("语句三");
}
//调用函数
fun();
/*
* 创建函数的方式二：
* - 使用函数表达式来创建一个函数
* - 语法:
* var 变量 = function([形参1,形参2,...形参n]){
* 语句...
* };
*/
var fun2 = function(){
alert("我是又一个函数");
};
//调用函数
fun2();
</script>
</head>
<body>
</body>
</html>
js中函数可以作为参数传递
第一种写法
function say (value) {
alert(value);
}
function execute (someFunction, value) {
someFunction(value);//回调函数
}
execute(say, 'hi js.');
上面代码是将say方法作为参数传递给execute方法
第二种写法
var say = function(value) {
alert(value);
}
function execute (someFunction, value) {
someFunction(value);//回调函数
}
execute(say, 'hi js.');
第三种写法
function execute (someFunction, value) {
someFunction(value);//回调函数
}
execute(function(value) {
alert(value);
}, 'hi js.');
上述代码中execute方法的第一个参数是一个匿名函数。
何谓匿名函数
没有函数名的函数
1 分析: 函数为何要有名字? 是为了方便下次使用.
2 用途: 通常不希望再次使用(即只使用一次的)的函数可以定义为匿名函数.
上面的函数say被叫做回调函数
回调函数（callback）
就是你调用别人（execute），然后别人会调用你（say），简言之：你写一个函数（say），但不是由你调用，是由你调用的一个函数（execute）调用。
函数做为返回值
function fn2(a){
return function (b){
alert(a+b);
};
}
fn2(20)(10);//30
补充一个例子
仿写JS的去重方法
function myfilter(func) {
var return_arr = [];
var arr = ["猪八戒","猪八戒","沙和尚","唐僧","孙悟空","白骨精","白骨精","唐僧","白骨精"];
for(var i = 0; i < arr.length; i++)
{
var result = func(arr[i],i,arr);
if(result== true)
{
return_arr.push(arr[i]);
}
}
return return_arr;
}
var newarr = myfilter(function (value,index,obj) {
if(obj.indexOf(value,index+1) == -1)//后面没有和我一样的元素了
{
return true;
}
else//后面还有和我一样的元素，我先不加入到最终数组newarr中
{
return false;
}
});
console.log(newarr);
arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
*在调用函数时，浏览器还传递了另一个隐含的参数
* 还有一个参数叫做arguments
*
* arguments是一个类数组对象，在它里边保存着函数执行时的实参
* 函数的所有的实参都在arguments中保存,
* 通过arguments即使不定义形参也可以使用参数
*
*
*/
function fun(a,b,c){
//获取实参的数量
//console.log(arguments.length);
//获取指定的实参
//实参会保存到arguments对象中指定的位置
//console.log(arguments[2]);
}
fun("hello",123,true);
</script>
</head>
<body>
</body>
</html>
变量作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 作用域（Scope）
* - 作用域简单来说就是指一个变量的作用的范围
* - 在JS中作用域分成两种：
* 1.全局作用域
* 2.函数作用域
*
* - 全局作用域：
* 1.所有直接在script标签中编写的代码都在全局作用域中
* 2.全局作用域在打开网页时创建，在网页关闭时销毁
* 3.全局作用域中有一个全局对象window，
* window代表的是浏览器的窗口，
* 在全局作用域中创建的变量都会作为window对象的属性保存
* 在全局作用域中创建的函数都会作为window对象的方法保存
* 4.在全局作用域中创建的变量都是全局变量，可以在页面的任意位置访问
*/
var a = 123;
b = 456;
function fun(){
console.log(b);
console.log(window.a);
console.log(window.b);
console.log("我是全局中的函数fun。。。。");
}
fun();
//window.fun();
//window.alert("hello");
</script>
</head>
<body>
</body>
</html>
变量和函数的声明提前：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//如果不写var，直接为变量赋值，则相当于为window对象添加属性
//window.a = 10;
//a = 10;
/*
* 变量的声明提前
* - 使用var关键字声明的变量，都会在所有的代码执行之前被声明，但是不会赋值
* 赋值会直到执行到赋值的代码时才执行
* - 如果不适用var关键字声明变量，则不会有声明提前的特性
*
* 函数的声明提前
* - 使用函数声明创建的函数，会在所有的代码执行之前创建，
* 所以我们可以在函数声明前就去调用函数
* - 使用函数表达式创建的函数，没有这个特性，所以不能在它创建之前调用
*/
console.log("a = "+a);
var a = 10;
//fun();
fun2();
//使用函数声明来创建一个函数
function fun(){
console.log("我是fun函数。。。。");
}
//使用函数表达式创建一个函数
var fun2 = function(){
console.log("----->我是fun2.。。。");
};
</script>
</head>
<body>
</body>
</html>
函数作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函数作用域
* - 函数作用域可以理解为是全局中的小的作用域
* - 函数作用域在函数调用时创建，在调用结束时销毁
* 每调用一次函数就会创建一个新的函数作用域
* - 在函数作用域中可以访问到全局变量,
* 而在全局中无法访问到函数作用域中的变量
* 在函数中创建的变量如果不写var，则会变成全局变量
* - 当我们在函数中使用一个变量时，它会先在自身的作用域中寻找，
* 如果有就直接使用，如果没有则去上一级作用域中寻找，
* 找到则使用，没找到则继续寻找，直到找到全局作用域为止
* 如果全局作用域中依然没有，则报错ReferenceError
* - 在函数作用域中也适用变量和函数的声明提前
*
*/
//创建一个全局变量a
var a = "全局中的a";
function fun(){
//console.log(a);
//window.b = ...
var b = "---> 函数作用域中的b";
//console.log(b);
}
//fun();
//console.log(b);
//创建全局变量c
var c = "全局c";
console.log(window.c);
/*function fun2(){
//创建一个局部变量c
var c = "---> 函数中的c";
console.log(c);
}
fun2();*/
function fun3(){
//var c = "fun3中的c";
function fun4(){
//var c = "fun4中的c";
console.log(c);
}
//调用fun4
fun4();
}
//fun3();
</script>
</head>
<body>
</body>
</html>
闭包：外层函数返回了一个内层函数，内层函数引用了外层函数中定义的一个或多个变量
闭包的一个例子同时也是调用函数中的函数的方法
// js的闭包
var i = 33;
//闭包
//外层函数返回一个内层函数，内层函数引用了外层函数中定义的一个或多个变量，就形成了闭包。
//封装
function test() {
var name = 'zhangsan';
var print = function() {
alert(name);
}
return print;
}
var func = test();
setTimeout(func,5000);
// func();
上述代码中，调用test（）的返回值就是print函数，也就是func，也就说明了调用test中的print的方法
例子2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a = "全局a";
function fun(){
var a = "--> 函数a";
//如果在函数作用域中想访问全局变量可以通过window对象来访问
console.log(window.a);
}
//fun();
a = 20;
/*
* 在函数内部使用var关键字声明的变量也会被声明提前，
* 它的声明会在所有的代码执行前执行
*
* 在函数内部使用函数声明创建的函数，也会在所有的代码执行之前被创建
*/
function fun2(){
fun3();
//console.log(a);
//var a = 10;
function fun3(){
console.log("我是fun2内部的函数。。。");
}
}
fun2();
</script>
</head>
<body>
</body>
</html>
另一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// var a = 10;
//
// function fun(){
//
// a = 5;
//
// }
//
// fun();
//
// console.log(a);//10 ---函数作用域在函数调用时创建，在调用结束时销毁
var a = 123;
/*
* 定义形参就相当于在函数中声明了对应的变量
*/
function fun(a) {
alert(a);
a = 456;
}
fun(); //undefined
alert(a); //123
var a = 123;
function fun(a) {
alert(a);
a = 456;
}
fun(123); //123
alert(a); //123
</script>
</head>
<body>
</body>
</html>
类的定义
//class关键字必须是小写。 后面就是跟的类名
class PersonClass {
// 等效于 PersonType 构造函数。
constructor(name) { //这个表示类的构造函数。constuctor也是关键字必须小写。
this.name = name; //创建属性。 也叫当前类型的自有属性。
}
sayName() {
console.log(this.name);
}
}
var person = new PersonClass("Nicholas");
person.sayName(); // 输出 "Nicholas"
继承
class Father{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}
class Son extends Father{ //extents后面跟表示要继承的类型
constructor(name, age){
super(name);
this.age = age;
}
//子类独有的方法
sayAge(){
console.log(this.age);
}
}
var son1 = new Son("李四", 30);
son1.sayAge();
son1.sayName();
子类重写父类的方法
class Father{
constructor(name){
this.name = name;
}
sayName(){
console.log(this.name);
}
}
class Son extends Father{ //extents后面跟表示要继承的类型
constructor(name, age){
super(name); //相当于以前的：Father.call(this, name);
this.age = age;
}
//子类独有的方法
sayAge(){
console.log(this.age);
}
//子类中的方法会屏蔽到父类中的同名方法。
sayName(){
super.sayName(); //调用被覆盖的父类中的方法。
console.log("我是子类的方法，我屏蔽了父类：" + name);
}
}
var son1 = new Son("李四", 30);
son1.sayAge();
son1.sayName();
