<!-- 函数的重要性 -->
<script>
// <1>函数是第一类对象:javascrip中函数拥有对象的所有能力
//对象能做的任何一件事,函数都能做
//函数的特别之处在于它是可调用的,可以被调用来执行某项操作
// 1.函数的创建方式
//(1)通过字面量创建
function foo(){
}
//(2)可赋值给变量,数组或者其他对象的属性
var aa = function(){}
var arr=[];
arr.push(function(){})
var bb = {};
bb.data=function(){}
// (3)作为函数的参数来传递
function call(ninjiaFunction){
}
call(function(){})
// (4)作为函数的返回值
function returnNinjiaFunction(){
return function(){}
}
// (5)具有动态创建和分配的属性
var ninjiaFunction = function(){}
ninjiaFunction.ninjia='lele'
</script>
<!-- 回调函数: 在执行过程中,我们建立的函数会被其他函数在稍后的某个合适的时间点"再回来调用"-->
<script>
var text = 'aaa';
console.log('11',"代码开始")
function uneless(callback){
console.log('22','在uneless函数中')
return callback()
}
function getText(){
console.log('33','在getText函数中')
return text
}
console.log('22',"代码准备就绪")
console.log(uneless(getText) === text)
console.log('end',"代码执行完毕")
</script>
<!-- 函数作为对象的乐趣 -->
<script>
var ninjia={}
ninjia.name="ddd";//创建新的对象并为其分配一个新的属性
var weldSword = function(){}
weldSword.sordType = 'ddd'; //创建一个新的函数并为其分配一个新的属性
// 实例1:存储函数
var store = {
nextId:1,
cache:{},
add:function(fn){
if(!fn.id){
fn.id=this.nextId++;
this.cache[this.nextId]=fn
return true
}
}
}
function ninjia(){}
console.log(store.add(ninjia))
console.log(store.add(ninjia))
// 实例2:自记忆函数
function isPrime(value){
if(!isPrime.cache){
isPrime.cache={}
}
if(isPrime.cache[value] !== undefined){
return isPrime.cache[value]
}
var isPrimeValue = value !== 0 && value !== 1
for(var i=2;i<value;i++){
if(value % i === 0){
isPrimeValue = false
break
}
}
return isPrime.cache[value] = isPrimeValue
}
console.log(isPrime(5))
console.log(isPrime(5))
console.log(isPrime.cache)
</script>
<!-- 函数的定义 -->
<script>
// 函数申明
function MyFun(){
return 1
}
// 函数表达式
var myFun = function(){
}
// 箭头函数
myArg => myArg * 2
// 构造函数
new Function('a','b','return a+b')
// 生成器函数
function* myGen(){
yield 1
}
// 详解
// (1)函数声明的方式:对于函数声明来说
// 函数名是强制的,因为它是独立语句,要能被调用必须具有被引用的方式
function dd(){
}
function aa(){
function hiddenFun(){
return 'hh'
}
hiddenFun()
}
// 函数表达式
var myFunc = function(callback){ //函数表达式作为变量赋值语句的一部分
return callback
}
myFunc(function(){ //函数表达式作为函数调用的参数
return function(){} //函数表达式作为函数的额返回值
})
// 立即函数
(function nameFun(){})() //作为函数调用一部分,命令函数表达式会立即调用
// 箭头函数
var greet = name => "greeting" + name
</script>
<!-- 函数的实参和形参 -->
<script>
// 形参是函数定义时列出的变量
// 实参是函数调用时传递给函数的值
// 函数的形参列表和实参列表长度可以不同,
// 未赋值的形参求值得到的时undefined,
// 传入额外的实参不会被赋值给任何一个命名形参
// 案例1:剩余参数
function multiMax(first,...remainNumbers){
var sorted = remainNumbers.sort(function(a,b){
return b-a
})
return first * sorted[0]
}
console.log(multiMax(3,1,2,3))
// 案例2:默认参数
function performAction(ninjia,action="sking"){
return ninjia + ' ' +action
}
console.log(performAction('xiaoming'))
console.log(performAction('xiaofang','sneak'))
</script>
<!-- 隐式函数参数 this和arguments-->
<script>
// arguments参数是传递给函数的所有参数集合
"use strict"
function whatever(a,b,c){
console.log(this)
console.log(arguments)
console.log(arguments.length)
console.log(arguments[0])
}
whatever(1,2,3,4,5)
// 非严格模式下,arguments作为函数参数的别名,改变
function infiltrate(person){
console.log(this)
console.log(person)
console.log(arguments[0])
arguments[0] = 'aaa'
console.log(person)
console.log(arguments[0])
person='bbb'
console.log(person)
console.log(arguments[0])
}
infiltrate('gardener')
</script>
<!-- 函数的调用 -->
<button id="test">Click me</button>
<script>
// this:函数的上下文
// this参数 的指向不仅是由定义函数的方式和位置决定的,同时还严重受到函数调用方式的影响
// 1.作为函数调用==>fun()
// 2.作为一个方法调用==>obj.fun()
// 3.作为一个构造函数==>new Fun()
// 4.通过函数的call和apply方法调用==>func.apply(obj)或者func.call(obj)
// 作为函数调用
function ninjia(){
return this
}
function strFunction(){
"use strict"
return this
}
console.log(ninjia())
console.log(strFunction())
// 作为方法调用
function whatMyContext(){
return this
}
console.log(whatMyContext())//作为函数调用 window
var getMythis = whatMyContext; //使用变量getMythis来调用函数,该函数仍然作为函数被调用,函数上下文也依然是window对象
console.log(getMythis())
var ninjia = {
getMythis:whatMyContext
}
var ninjia2={
getMythis:whatMyContext
}
console.log(ninjia.getMythis() === ninjia)
console.log(ninjia2.getMythis() === ninjia2)
// 作为构造函数调用-->new
// 使用new调用函数会触发的动作
// (1)创建一个空对象
// (2)该对象作为this参数传递给构造函数,从而成为构造函数的上下文
// (3)一般情况下,新的构造函数对象最为new运算符的返回值
function Ninja(){
this.shulk = function(){
return this
}
}
var ninjia1 = new Ninja()
console.log(ninjia1)
console.log(ninjia1.shulk())
// 构造函数有返回值
// 1.返回一个非对象类型
function Ninjia2(){
this.shulk=function(){
return this
}
return 1
}
console.log(Ninjia2())//函数式调用
var ninjia3 = new Ninjia2()//作为构造函数
console.log(ninjia3)
// 2.显式返回对象值
var puppet={
rules:false
}
function Emperor(){
this.rules=true;
return puppet
}
var emperor = new Emperor()
console.log(emperor === puppet)
// 使用apply和call方法调用
// javascript为我们提供了一种调用函数的方式.从而可以显式地指定任何对象作为函数的上下文
// 我们可以使用每个函数上都存在的这两种方法来完成:apply 和 call
function Button(){
this.clicked=false;
this.click=function(){
this.clicked=true
console.log("按钮被点击过",Button.clicked)
console.log("按钮被点击过",this)
console.log("按钮被点击过",button)
}
}
var button = new Button()
var elem = document.getElementById("test")
elem.addEventListener('click',button.click)
// 强制回调函数的函数上下文
function forEach(list,callback){
for(var n=0;n<list.length;n++){
callback.call(list[n],n)
}
}
var wepons = [{type:'aaa'},{type:'ddd'},{type:'ffff'}]
forEach(wepons,function(index){
console.log(this)
console.log(wepons[index].type)
})
</script>
<!-- // 解决函数上下文的问题
// (1)使用箭头函数 绕过函数上下文问题
// 箭头函数没有单独的this值,箭头函数的this与声明所在的上下文相同
// (2)使用bind方法,所有函数均可访问bind方法,可以创建并返回一个新函数,并绑定在传入的对象上
-->
<button id="test1">test1</button>
<button id="test2">test2</button>
<button id="test3">test3</button>
<script>
function Button(){
this.clicked=false
this.click=()=>{
this.clicked=true
console.log(button.clicked)
console.log(this)
console.log(button)
console.log(this === button)
}
}
var button = new Button()
var elem = document.getElementById('test1')
elem.addEventListener('click',button.click)
// 箭头函数在创建的时候确定了this的指向.由于click箭头函数式作为对象字面量的属性定义的,
// 对象字面量在全局代码中定义,因此箭头函数内部的this与全局代码的this相同
var button={
clicked:false,
click:()=>{ //箭头函数
this.clicked=true
console.log(this)//window
console.log(this==button)//false
}
}
var elem=document.getElementById('test2')
elem.addEventListener('click',button.click)
// 使用bind方法
var button3={
clicked:false,
click:function(){
this.clicked=true
console.log(this.clicked)
console.log(this)
console.log(button3 === this)
}
}
var elem3 = document.getElementById("test3")
elem3.addEventListener('click',button3.click.bind(button3))
</script>
<!-- 闭包和作用域 -->
<script>
var outerValue = "juyongxia";
function outerFuncton(){
console.log(outerValue)
}
outerFuncton()
var outerValue = 'aaaa';
var later;
function outerFunction(){
var innerValue = 'bbb';
function innerFunction(){
console.log(outerValue)
console.log(innerValue)
}
later = innerFunction
}
outerFunction()
later()
</script>
<script>
// 使用闭包---封装私有变量
function Ninja(){
var counts=0;
this.getCounts = function(){
return counts
}
this.setCounts = function(){
counts++
}
}
var ninjia1 = new Ninja()
ninjia1.setCounts()
console.log(ninjia1.counts === undefined)
console.log(ninjia1.getCounts())
var ninjia2 = new Ninja()
console.log(ninjia2.getCounts())
</script>
<div id="box1">First Box</div>
<script>
function animateIt(elemantId){
var elem = document.getElementById(elemantId)
var tick = 0;
var timer =setInterval(function(){
if(tick< 100){
elem.style.left = elem.style.top = tick +'px'
tick++
}else{
clearInterval(timer)
console.log(tick)
console.log(elem)
console.log(timer)
}
},10)
}
animateIt('box1')
</script>