js对象篇
课程目标:
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()
{
输出内容
}
};总结：
记住,对象有属性&&方法才能叫做对象.
效果：
在这里插入图片描述
函数和方法区别
<!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>总结：
函数与方法区别是: 函数是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.因为调用的是对象,不是构造函数啊，构造函数在类中啊
效果：
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-11-07 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录