课程目标:
工厂函数
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.因为调用的是对象,不是构造函数啊，构造函数在类中啊
效果：
