Javascript

原创已于 2025-01-08 13:43:23 修改 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2024-12-12 16:53:04 首次发布

1，js的引入方式：1，内部 <script>js代码</script> 写在<body></body>中

2，外部js的引入 <script src='路径'></script> 引入后内部不可写js代码

2，注释符和结束符：// js中的单行注释 /*多行注释*/ 结束符 ;

3，输出：1，警示框 alert() 2，控制台打印 console.log() 3，浏览器可视区进行打印 document.write() (可识别标签)

输入：输入框 prompt()

4，变量：在程序运行时，可以发生改变的量

变量的声明方式：let 变量名称

变量的赋值：变量名=赋值 (声明的同时可直接赋值)

同时声明多个变量  let num2=1,num3=2 (let声明的变量不能重复声明 let声明的变量，在声明之前，不能够进行访问，否则会报错)

var也可用于声明变量  var：没有作用域的概念，后期推荐用let

  变量的命名规范：1、只能有字母数字下划线、$ 并且数字不能作为开头

2、使用有寓意的名称

3、字母严格区分大小写

4、不能使用js的关键字和保留字

常量：程序运行时，不能发生变化的量 (声明后不可改变)

常量的声明：const 常量名 = 值常量名一般是纯大写的

5，数据类型的检查：typrof 要检查的数据

字符串：' ' 或 " " 包裹起来的数据就是字符串 (单引号双引号必须成对出现自己不能嵌套自己必要的时候必须自己嵌套自己那么就需要使用转义字符 \ ) 可以使用+进行字符串的连接

` `模板字符串可以进行换行，并且能够配合${ }实现格式化输出

6，算数运算符：+加 -减 *乘 /除 %取余 **幂次方

比较运算符：> < >= <= == != ===(即会比较值，又会比较数据类型) 结果均为布尔值

逻辑运算符：&& 两真才真，一假则假 || 一真则真，两假才假 ! 表否定

赋值运算符：= 把运算符右边的数据赋值给左边的变量 a+=21为a=a+21 其他算数运算符同理

自增自减运算符：变量++ 变量-- (后++运算符的优先级小于赋值) ++变量 --变量(前++优先级大于赋值) 意思为变量值加或减1

位移运算符：直接对数字的二进制形式进行运算 & 与运算两个1才为1 | 或运算有1为1 ^ 异或运算相反为1 <<左移运算符把数字中的所有数位向左移动指定的数量 >>> 无符号位的右移无符号 32 位数的所有数位整体右移 >> 有符号位的右移整数补0 负数补1

三目运算符：变量 = 表达式 ? 表达式成立时执行的代码 : 表达式不成立时执行的代码(简写的if else语句)

7，类型转换：Number(变量) parseInt(变量) 把数据尽可能的转换为整数 parseFloat(变量) 转换为浮点偏方：let 变量 = +变量(转化为整数)

8，流程控制语句：顺序结构：就是默认的代码从上往下从左往右进行执行

选择结构：程序运行时，可能需要出现不同的情况执行不同的代码

单分支：

条件：可以是任何结果为true或者false的运算符、比较、逻辑
<script>

    if(条件){
        条件成立时执行的代码
    }

</script>
双分支：
<script>

    if(条件){
        条件成立时执行的代码
    }else{
        条件不满足时执行的代码
    }

</script>
多分支：
<script>

    if(条件1){
        条件1成立时执行的代码
    }else if(条件2){
        条件2成立时执行的代码
    }else if(条件n){
        条件n成立时执行的代码
    }else{
        以上条件都不成立时，执行的代码
    }

</script>
<script>

switch(变量){
    case "n1":
        变量==n1时从这行开始执行
    case "n2":
        变量==n2时从这行开始执行
    case "n3":
        变量==n3时从这行开始执行
    ......

</script>
ps：使用break打断switch语句

循环结构：for while do...while
<script>

while (条件){
    // 条件成立时执行的循环体
    // 起始值的自增或自减

}
</script>
<script>

do{
    //执行的语句
			
}while(条件)

</script>
<script>

for(定义一个临时变量;条件语句;变量值的更改){
    循环体
}

</script>
退出循环语句：continue 结束本次循环，直接开始下一次循环

break 直接打断本次循环，并且结束循环

循环加强：
<script>

let arr = [1,2,3,"zhangsan","lisi"]

for(let i in arr){
    console.log(arr[i])
}

for(let i of arr){
    console.log(i)
}
		
//都为在控制台打印遍历arr列表中的值

</script>

9，数组：数组对象使用单独的变量名来存储一系列的数据

数组的创建：
<script>

//方法1
    let arr1 = new Array(数组的内容)
//方法2
    let arr2 = []

</script>
ps:数组中可以存储不同的数据类型

数组的访问：变量名[索引下标]

改变数组内数据：变量名[索引下标] = 改变成为的内容

数组的属性及方法：对象名.属性 length拿到的是数组长度对象名.方法名([参数]) unshift() 在数组的开头添加一个元素 push() 在数组的最后方添加元素 pop() 删除数组的最后一个元素 shift() 删除第一个元素 concat() 进行数组的拼接，但是原有的数组不会更改，只会返回一个新的数组 join() 将数组里的元素通过指定的符号进行拼接 reverse() 反转数组里的元素 slice(n,m) 原始的数组不会更改，只会返回在原数组中索引为n到m-1中的内容的新的数组 sort() 排序 splice(num1,num2) 从下标为num1的地方开始，删除num2个元素在指定的位置添加 splice(num1,0,x)

10，函数：指的是实现某一功能的代码的集合

定义函数：
<script>

    function 函数名称([参数]){
        // 函数体
		// 如果函数存在返回值，则需要使用return关键字
		[return 返回值]
	}

</script>
注意，函数定义完成之后，不会自动执行，需要自己手动调用调用方法：函数名称([参数])

函数作为参数：
<script>
	function say(){
		console.log("这是一个say函数")	
	}

	function show(fn){
		fn()
		console.log("这是第二个函数")			
	}

	show(say)
	say()
    // say函数的内存地址传递过去了    say是一个回调函数 
    
</script>
默认值参数：function get_area(r,PI=3.1415){ } 默认值参数一定是在普通参数的后面进行定义的

arguments对象：一个函数参数形成的数组

匿名函数：在定义的时候，没有命名的函数函数可以作为参数进行传递匿名函数一般情况下用于充当参数一定性使用
<script>

    function show(fn){
	    fn()
		console.log("这是第二个函数")
	}
	// 函数名实际上就是指向函数存放的内存地址的变量

	let b = show
	b(function () {
		console.log("我是匿名函数")
	})

</script>
箭头函数：let a=([参数])=>{函数体} (简化函数) 对于箭头函数，可以省略return关键字

一个参数的时候，()可有可无

函数递归：函数自身调用自身的现象可以用来解决能够使用分治思想解决的问题
<script>

    function 函数名([变量]){
		// 先写递归出口
		if(条件){
			return ...
		}
        ...
		return 函数名(...)

</script>
函数属性：函数名.length 返回的时函数需要接受的命名参数有几个

闭包：内部函数用到了外部函数的数据，那么就可以认为该函数是一个闭包为了防止全局变量的污染问题，利用闭包，立即执行函数
<script>

	function outer(){
		let a = 21
		function inner(){
			return a
		}
		return inner
	}

	let s = outer()
	s()
	console.log(s())

</script>

11，作用域：全局变量：在当前热呢位置都能够访问到该变量的值

局部变量：指的就是在函数内部声明的变量，只会在函数内部生效，外部无法访问

块级变量：{} :一个代码块在一个{}内部声明的变量，只在该代码块生效

12，值传递：函数不会改变外部定义的变量只将变量的值传入函数

引用传递：函数可以改变外部定义的数组

13，对象：就是用有属性和方法的一种特殊的数据类型布尔、数字、字符串、函数、数组、js中万物皆对象
<script>
	// 字面量创建方式
	let obj1 = {
	    Key : value ,
		key : value,
		//更多的键值对
	}
		// Key:字符串或者标识符
		// value：任意的js数据类型

</script>
访问对象的属性：对象名.属性名对象名[ ]

访问对象的方法：对象名.方法名()

对象的遍历：
<script>

    for(let i in obj1){
		console.log(obj1[i])
	}

</script>

14，环境变量this：在函数当中this的指向,指向调用函数的那个对象在对象的方法中,this指向调用该方法的对象注意，箭头函数不存在this的作用域

15，Math数学模块：Math.E 自然常数e Math.PI 圆周率 Math.SQRT2 开平方 Math.ceil() 向上取整 Math.floor() 向下取整 Math.abs() 绝对值 Math.max() Math.min() 最大值最小值 Math.random() 拿到的时[0,1)之间的随机数 Math.round() 四舍五入 Math.squr() 开平方跟 Math.pow() 幂次方

16，Date：let date = new Date() 获取当前时间对象 let date = new Date('2002-02-02 00:00:00')获取参数对应时间对象 date.getFullYear() 获取四位数年 date.getMonth()+1 月(从0开始排) date.getDate() 日期 date.getHours() 时 date.getMinutes() 分 date.getSeconds() 秒 date.getMilliseconds() 毫秒 date.getTime 获取时间戳(从1970-01-01 00:00:00开始到参数时间的毫秒) date.getDay() 周几

17，字符串对象：
<script>
   
    //js中声明字符串的方式
    let str1 = "kadbubkda"
    
    let str2 = new String("ahdkja")

</script>
str1.length 返回字符串长度 str1.chatAt()获取下标对应字符 str1.indexOf() 得到字符第一次出现的下标 str1.lastIndexOf() 得到字符最后一次出现的下标 str1.chatCodeAt() 获取对应下标字符的unicode编码 str1.match(/正则表达式/) 使用正则表达式匹配字符内容 str1.replace("a","*") 第一个参数是要替换的，第二个参数是替换成的新值 str1.search() 查找匹配的字符的下标(默认只查第一个) str1.slice(3,5) 获取[3,5)对应字符 str1.split("指定的分割符") 用指定的字符作为分割符对字符串进行分割 str1.endWith() 判断字符串是否是以...结尾的 str1.startsWith() 判断字符串是否是以...开头的 str1.toLocaleUpperCase() 字符串全部转为大写

18，document：document.cookie 拿到当前文档相关的cookie document.domain 拿到当前文档的域名 document.lastModified 当前文档最后被修改的时间和日期 document.referrer 载入当前文档的URL document.title 当前文档的标题

19，dom对象的获取：

<script>
    //1,css选择器获取
    //document.querySelector("")只能拿到匹配的第一个对象
    const box1 = document.querySelector("css选择器")
    //document.querySelectorAll("")获取匹配所有对象并形成伪数组，即使只有一个也是伪数组
    const box2 = document.querySelectorAll("css选择器")

</script>

<script>
    //通过class获取元素对象
    let box1 = document.getElementsByClassName("")
    //通过id获取
    let box2 = document.getElementById("")
    //通过标签名称
    let box3 = document.getElemnetByTagName("")
</script>

修改元素对象里面的内容：

<script>
    const box = document.querySelector("")
    box.innerHTML="修改的内容"
</script>

innerText 不能识别标签 innerHTML 可以识别标签

修改元素的属性：

<script>
    //1,获取元素对象
    const img = document.querySelector('')
    const btn = document.querySelector('button')
    //2，修改元素对象的属性   元素对象.属性=值
    img.src=""
    btn.disable=false
    //属性名和属性值相同的属性，通过赋值true和false进行更改
</script>

修改元素对象：

<script>
	// 1、获取元素
	const box1 = document.querySelector(".box")
	// 2、修改box1的宽度为300px 高度为500 背景颜色为red 
	// 元素对象.style.css样式=属性值
    box1.style.width="300px"
	box1.style.height="500px"
	// css属性不能出现-，可以用小驼峰（除了第一个单词以外，其余单词的首字母大写）代替  
	box1.style.backgroundColor="red"
	// 3、className操作类名
	// 会把原来的类名覆盖掉
	box1.className="change box"
	// 4、classList  add()  remove() toggle()
	//添加类名
	box1.classList.add("change")
	box1.classList.remove("box")
    // toggle() 如果没有，则添加，如果有，则去除
	box1.classList.toggle("change")
	box1.classList.toggle("box")
</script>

注册事件：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			opacity: 0;
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<!-- 1、标签绑定 -->
	<button onclick="alert('123')">点击显示</button>
	<div></div>

	<script>
		
		function test(){
			document.querySelector("div").style.opacity=1
		}
	</script>

</body>
</html>

dom0事件模型：

	<script>
		// 1、获取元素  
		const btn = document.querySelector("button")
		const box = document.querySelector("div")
		// 2、添加事件  事件源.on事件类型=回调函数
		btn.onclick=function(){
		    // 事件触发时执行的代码
			box.style.opacity=1
		}
		// 删除注册事件
		btn.onclick=null
		// dom0的方式不能给同一个事件源添加多个相同事件类型的事件，会进行覆盖
	</script>

dom2事件模型：

	<script>
		// 1、获取元素对象
		const btn = document.querySelector("button")
		const box = document.querySelector("div")
		// 2、添加事件
	    // 事件源.addEventListener("事件类型",回调函数)
		function fn() {
			// 事件触发执行的代码
			box.style.opacity = 1
		}
		btn.addEventListener("click",fn)
		btn.addEventListener("click",function(){
			alert(123)
		})
		// dom2同一个元素，同一个事件，可以添加多个事件监听
		// 移除事件
		btn.removeEventListener("click",fn)

	</script>

捕获和冒泡：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.grandfather{
			width: 800px;
			height: 800px;
			background-color: yellow;
		}
		.father{
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.son{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="grandfather">
		<div class="father">
			<div class="son">

			</div>
		</div>
	</div>

	<script>
		// dom0只有冒泡
		let grandfather=document.querySelector(".grandfather")
		let father = document.querySelector(".father")
		let son = document.querySelector(".son")
		// addEventListener第三个参数如果是false或者省略，那么就是处于冒泡阶段的
		// 如果值是true，那就是处于捕获阶段的
		grandfather.addEventListener("click",function(e){
			console.log("grandfather")
			// 阻止事件的捕获和冒泡，也就是传播
			e.stopPropagation()
		})
		father.addEventListener("click", function (e) {
			console.log("father")
			e.stopPropagation()
		})
		son.addEventListener("click", function (e) {
			console.log("son")
			e.stopPropagation()
		})
    </script>

</body>
</html>

事件对象：

    <textarea name="" id=""></textarea>
	<script>
		let txt=document.querySelector("textarea")
		// 事件相关的一系列的数据的集合，其中形参的名字可以任意取，一般为e、even
		txt.addEventListener("keydown",function(e){
			// console.log(e)
			// e.key:用户按下的键盘的值
			if(e.key=="Enter"){
			    alert("你好")
			}
			// 返回触发事件的对象的
			console.log(e.target)
			// 返回的是事件类型
			console.log(e.type)
		})
	</script>

事件对象阻止默认行为：

    <a href="https://www.baidu.com">去百度</a>

	<script>
		const a = document.querySelector("a")
		a.addEventListener("click",function(even){
			// 阻止默认行为
			even.preventDefault()
		})
	</script>

事件委托：

    <ul>
		<li>第1个li</li>
		<li>第2个li</li>
		<li>第3个li</li>
		<li>第4个li</li>
		<li>第5个li</li>
		<li>第6个li</li>
		<li>第7个li</li>
		<li>第8个li</li>
		<li>第9个li</li>
		<li>第10个li</li>
	</ul>

	<script>
		let ul = document.querySelector("ul")
		ul.addEventListener("click",function(e){
			// console.log(e.target)
			e.target.style.backgroundColor="red"
		})

	</script>

排他思想：

    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>

    <script>

        //获取元素对象
        const btn = document.querySelectorAll("button")
        //添加事件
        for(let i=0;i<btn.length;i++){
            btn[i].addEventListener('click',function(){
                for(let i=0;i<btn.length;i++){
                    btn[i].classList.remove('change')

                }
                btn[i].classList.add("change")
            })
        }
        
    </script>

操作节点：

	<script>

		// 用子节点去获取父节点
	    const son1 = document.querySelector(".son")
		console.log(son.parentNode)

		//子节点操作
		const ul = document.querySelector("ul")
		console.log(ul.children[2])
		
		// 兄弟节点
		// nextElementSibling 下一个兄弟元素节点
		console.log(document.querySelector(".son").nextElementSibling)
		
	</script>

节点的创造和添加：

	<script>
		// 1、获取元素对象
		const btn = document.querySelector("button")
		const ul = document.querySelector('ul')
		const txt = document.querySelector("textarea")

		// 2、添加事件监听
		btn.addEventListener("click",function(){
		    // 1、创建新的元素节点
		    // document.createElement('要创建的元素名')
		    console.log(txt.value)
			// let newLi = document.createElement('li')
			// 2、给节点添加内容
			// newLi.innerHTML=`这是通过js添加的第一个li`
			// console.log(newLi)
			// 3、添加节点  父元素.appendChild(新的元素)   把新的元素追加到父元素的最后一个子节点
			// ul.appendChild(newLi)
			// 父节点.insertBefore(新的元素,插入的指定的位置)
			// ul.insertBefore(newLi,ul.children[0])			
		})

		txt.addEventListener("keydown",function(e){
			console.log(e.keyCode)
		})

	</script>

节点的删除：

    <script>
		// 1、获取元素
		const btn = document.querySelector('button')
		const ul = document.querySelector("ul")
		// 2、添加事件
		btn.addEventListener("click",function(){
			// 删除节点   父元素.removeChild(子元素)
			ul.removeChild(ul.children[0])
		})
	</script>

节点的拷贝：

    <script>
		const ul = document.querySelector("ul")
		// 默认的克隆是浅拷贝，只复制标签，不复制标签里的内容
		// true  深拷贝，复制标签并且复制里面的内容
		let copyli = ul.children[0].cloneNode(true)
		ul.appendChild(copyli)
	</script>

定时器：

    <script>
		// 定时执行代码的功能，叫做定时器（timer）  主要是由
		// setTimeout   setInterval   

		// setTimeout(code|fun,ms)  code必须是字符串的形式
		// setTimeout('alert("hello,word")',3000)
		function fn(){
			console.log(2)
			
		}
		// 如果第二个参数省略了，那么就默认第二个参数是0  
		
		// setTimeout() 代码只会执行一次
        // 第三、四个参数会默认作为回调函数的实参
		setTimeout(function(a,b){
		 		alert(a+b)
		},3000,3,4)

		// 某个任务每隔一段时间就执行一次

		// 定时器最终返回了一个整数值，表示的是计时器的编号
		let timer1 = setInterval(fn,2000)
 
		// 清除定时器
		console.log(timer1)
		clearInterval(timer1)
	
	</script>

20，Bom对象：window对象常见事件：

    <script>

		// 窗口页面加载事件 load :当文档的内容完全加载完毕之后会触发的事件（图像、脚本、css文件）
		 window.onload=function(){
		     const btn = document.querySelector("button")
		 	 btn.addEventListener("click", function () {
		     alert(123)
		     })
		 }

		// DOMContentLoaded:监听的是document，等待dom加载结束之后就是执行回调函数中的代码。不会等待css样式和图片等
		document.addEventListener("DOMContentLoaded",function(){
		 	const btn = document.querySelector("button")
		 	btn.addEventListener("click", function () {
		   		alert(123)
		 	})
		})

        window.onresize=function(){
			// window.innerWidth当前窗口的宽度大小
			console.log(window.innerWidth)
			console.log(window.innerHeight)
		}

	</script>

js执行机制：js语言的最大的特点就是单线程，同一时间只能干一件事情 js的执行时间过长，可能会导致页面渲染的不连贯 js的任务分为两种，一种同步任务（在主线程上排队等待执行的任务），一种是一步任务（指的是比较耗时间的任务，会阻塞主线程的执行，我们会把这些任务交到任务队列当中）常见的异步任务：定时器、事件

js执行机制：事件循环主线程上执行同步任务，异步任务会被直接放到任务队列当中。当主线程上的同步任务执行结束之后，执行栈会退出任务队列当中的收个任务放入主线程执行

location:

    <script>
	// location对象主要是获取和设置窗体的URl，并且可以用于解析URL
	// url：统一资源定位符
	// 通信协议://域名[:端口号]/路径/?参数（键值对的形式，&链接）#one
	// https://pro.jd.com/mall/active/3J13cRc4KPMNqXPVuVFY9aDKsBJy/index.html?babelChannel=ttt1
		
	// location对象的属性
	console.dir(location)
	// location.href  返回窗口的整个url地址
	// location.host  返回域名
	// location.port  返回的是端口号
	// location.pathname  返回路径
	// location.search  返回的是参数
	// location.hash  返回片段   #后面的内容

    // location的方法
    // 浏览器加载并显示指定网址的页面内容。
    location.assign("https://www.baidu.com")
    // 重新加载页面，相当于按了f5强制刷新了
	location.reload()

	</script>

navigator对象：包含有关浏览器的信息，例如浏览器名称、版本、操作系统等

history:

    <script>
		document.querySelector(".qian").addEventListener('click',function(){
            // 前进
			// history.forward()
			history.go(1)
		})
		document.querySelector(".hou").addEventListener('click', function () {
            //后退
			// history.back()
			history.go(-1)
		})
	</script>

offset:

    <script>
		// 获取某个元素的宽度和高度
		// 也可以获取元素距离某个带有定位的父元素的位置（body）
		const box1=document.querySelector("div")

		// 返回自身包括padding、border、content区域的宽度和高度
		// console.log(box1.offsetWidth)
		// console.log(box1.offsetHeight)
		// console.log(box1.offsetTop)
		// console.log(box1.offsetLeft)

	</script>

client:

    <script>
		const box = document.querySelector("div")
		// 元素上边框和左边框的大小
		console.log(box.clientTop)
		console.log(box.clientLeft)

		// 包含padding、content，但是不包含border
		console.log(box.clientWidth)
		console.log(box.clientHeight)

	</script>

scroll:

    <script>
		// scroll获取的是元素的大小以及滚动的距离
		const box = document.querySelector("div")

		box.addEventListener("scroll",function(){
		console.log(box.scrollTop)
		console.log(box.scrollLeft)
	    })		
		box.scrollTop=1000

		// mouseenter（不存在捕获和冒泡）   mouseover（存在冒泡）   

	</script>

21，面向对象：

<script>
		// 构造函数----对象的模版
		// uname  age  hobby
		// 对象  {}   new Object()

		function Person(uname,age,hobby){
			// 指向的是实例化出来的对象本身
			this.uname=uname
			this.age=age
			this.hobby=hobby
		}

		// 原型对象:构造函数通过原型对象分配的函数是被所有对象所共享的
		Person.prototype.sing=function(){
			console.log("sing")
		}

		// 实例化  new 构造函数名()
		// new Date()   new Array()

		let zhangsan = new Person("zhangsan",22,"sing")
		console.log(zhangsan.uname)
		console.log(zhangsan.age)
		console.log(zhangsan.hobby)
		
		let lisi = new Person("lisi",11,"dance")
		console.log(lisi.uname)
		console.log(lisi.age)
		console.log(lisi.hobby)
		// zhangsan.sing()
		// lisi.sing()
		console.log(zhangsan.sing===lisi.sing)

	</script>

原型链：

    <script>
		
		function Anim(){
				this.footer = 4
				this.eays=2
		}
		function Cat(){
		
		}

		function Dog(){
			
		}

		let anim1 = new Anim()
		Cat.prototype=anim1
		Cat.prototype.constructor=Cat
		Cat.prototype.sing = function () {
			console.log("喵喵喵")
		}

		let cat1 = new Cat()
		cat1.sing()
		// console.log(cat1.eays)

		let anim2 = new Anim()
		Dog.prototype=anim2
		Dog.prototype.constructor = Dog

		let dog1 = new Dog()
		console.log(Cat.prototype.__proto__===Anim.prototype)
        //（Cat.prototype）的原型（proto）等于类 Anim 的原型对象（Anim.prototype）。
        // 这意味着 Cat 类继承自 Anim 类。通过这种方式，
        // 可以在 Cat 类的实例中访问 Anim 类的原型上的属性和方法
		

		
	</script>