課程目標:
1.掌握面向物件的基本操作.
2.·掌握建構式的優化策略.
3.創建物件的方式.
1.創建物件的三種方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//創建物件的第一種方式
/*let obj=new Object();
obj.name="cyg";
obj.age=20;
obj.say=function()
{
console.log("666");
}
console.log(obj.name);
console.log(o*/
// 創建物件的第二種方式
/*let obj={};
obj.name="cyg";
obj.age=20;
obj.say=function()
{
console.log("777");
}
console.log(obj.name);
console.log(obj.age);
obj.say();*/
// 創建物件的第三種方式
let obj={
name:"cyg",
age:20,
say:function()
{
console.log("888");
}
};
console.log(obj.name);
console.log(obj.age);
obj.say();
</script>
</body>
</html>
形式:
物件名.方法名=function()
{
//輸出內容
}
let 物件名=new Object();
物件名.屬性;
物件名.方法名();
//第二種方式：
let 物件名={};
物件名.屬性名=屬性;
物件名.方法名=function()
{
輸出內容
}
//第三種方式:
let 物件名={
屬性名:屬性值,
方法名:function()
{
輸出內容
}
};
總結：
1.記住,物件有屬性&&方法才能叫做物件.
效果：
函式和方法區別
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function demo()
{
console.log(this);
}
window.demo();
let obj={
name:"cyg",
test:function()
{
console.log(this);
}
};
obj.test();
</script>
</body>
</html>
總結：
1.函式與方法區別是:
函式是window呼叫的.
方法是物件呼叫的
效果：
工廠函式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function createPerson(myName, myAge)
{
let obj=new Object();
obj.name=myName;
obj.age=myAge;
obj.say=function()
{
console.log("hello world");
}
return obj;
}
let obj1=createPerson("cyg",20);
let obj2=createPerson("liwen",20);
console.log(obj1);
console.log(obj2);
</script>
</body>
</html>
總結:
工廠函式與建構式的區別是:
1.建構式是工廠函式的簡化.
2.建構式是通過new來呼叫.工廠函式是通過普通函式來呼叫的.
建構式二重奏:
第一重:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function Person(myName, myAge)
{
//let obj=new Object();
//let this=obj;
//以上兩句系統自動添加
this.name=myName;
this.age=myAge;
this.say=function()
{
console.log("hello world");
}
//以下系統自動添加
//return this;
}
let obj1=new Person("cyg",20);
let obj2=new Person("liwen",20);
console.log(obj1);
console.log(obj2);
</script>
</body>
</html>
總結：
1.建構式執行完才能被稱為創建物件完了.
效果：
第二重:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//功能:用案例講述this的指向問題.
function Person(myName, myAge)
{
this.name=myName;
this.age=myAge;
this.say=function()
{
console.log(this.name,this.age);
}
}
let obj1=new Person("cyg",20);
obj1.say();
let obj2 = new Person("zs", 44);
obj2.say();
console.log(obj1.say===obj2.say);
// 通過三個等號來判斷兩個函式名稱, 表示判斷兩個函式是否都存盤在同一塊記憶體中
//2:
function demo()
{
console.log("demo");
}
console.log(demo===demo);
</script>
</body>
</html>
總結：
建構式與普通函式的區別:
1.在同一個建構式創建出來的物件是不一樣的（地址不一樣）.,比如這里的obj1與obj2.
2.呼叫普通函式是一樣的(記憶體地址.)
效果：
建構式優化三重奏:
第一奏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
function mySay()
{
console.log("hello world");
}
function Person(myName, myAge)
{
this.name = myName;
this.age = myAge;
this.say = mySay;
}
let obj1 = new Person("lnj", 34);
let obj2 = new Person("zs", 44);
console.log(obj1.say === obj2.say);
</script>
</body>
</html>
總結：
優化為了什么？
為了使記憶體地址一樣,不占用記憶體把.
1.呼叫了同一個普通函式.
效果：
第二奏:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*function mySay()
{
console.log("666");
}*/
//簡化為:
let fns={
mySay:function()
{
console.log("666");
}
};
function Person(myName, myAge)
{
this.name=myName;
this.age=myAge;
this.say=fns.mySay;
}
let obj1=new Person("cyg",20);
let obj2=new Person("liwen",20);
console.log(obj1.say===obj2.say);
</script>
</body>
</html>
總結：
1.呼叫物件是一樣的，比如我愛你，他也愛你.是不是愛的是一個人啊，
2.呼叫建構式是不一樣的,為什么,因為他是類中的，類是一個整體不是個體啊.
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let fns = {
test: function () {
console.log("test");
}
}
console.log(fns.test === fns.test);
</script>
</body>
</html>
總結：
1.因為呼叫的是物件,不是建構式啊，建構式在類中啊
效果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/208231.html
標籤：其他
上一篇：Struts2入門學習筆記詳解：
下一篇：jQuery基礎知識