学习内容:
-理解面向对象相关概念-理解this
-掌握如何创建对象
-掌握原型
学习时间:
1、 周一至周五早上 8点—晚上9点
2、 周六上午 8 点-晚上 9 点
文章目录
一、面向对象相关概念
Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(Object Oriented Programming)语言,因为它的语法中没有class(类)。对象:
引用类型是一种数据结构,将数据(属性)和功能(方法)组织在一起,常被称为类【抽象】;
某个特定引用类型的实例就是一个对象 引用类型&对象–模具、实例 【具体】;
我们要把"属性"(property)和"方法"(method),封装成一个对象。
面向对象和面向过程;
二、创建对象
1.基于Object的方式创建对象
语法代码如下(示例):
var 对象名称=new Object( );
var user = new Object();
user.name = "张三";
user.pwd = "123456";
user.show=function(){
document.write(this.name+"-"+this.pwd);
}
user.show();
2.对象字面量
定义:
对象定义的一种简写形式
简化创建包含大量属性的对象的过程
在为函数传递大量可选参数时,可考虑使用对象字面量
语法代码如下:
var user = {
username : "黄晓明",
password : "123456",
show:function(){
document.write(this.username+"-"+this.password+"<br/>");
}
}
user.show();
在为函数传递大量可选参数时,可考虑使用对象字面量:
// 在为函数传递大量可选参数时,可考虑使用对象字面
//如:我们想要给fn函数传递fn(a,b,c,d){} 其中参数是可选参数
function fn(obj){
var defObj = {
a:'a',
b:'b',
c:'c',
d:'d'
}
// Object.assign(被覆盖内容,覆盖内容);
//用来合并目标对象的,如果有相同属性会覆盖,否则就合并。
var newobj = Object.assign(defObj,obj);
console.log(newobj);
}
fn({
a:'a111',
b:'b111',
c:'c111'
})
3.练习页面展示用户信息
要求:
-基本Object对象的方式创建person对象
-使用“.”为对象person添加属性name、age、job和address
-添加方法intro( ),在页面上显示对象属性name、age、job和address的值
姓名:黄晓明
年龄:32
职业:明星
地址:中国
<script>
var person = new Object();
person.name = '黄晓明',
person.age = '32',
person.job = '明星',
person.address = '中国'
person.intro = function(){
var str = '姓名:'+this.name+'<br>年龄:'+this.age+'<br>职业:'+this.job+'<br>地址:'+this.address
document.write(str);
}
person.intro();
</script>
4.共厂模式
工厂模式:
软件工程领域的一种设计模式
抽象了创建对象的过程
通过函数封装创建对象的细节,就是把创建对象的过程封装在了函数中
姓名:黄晓明
年龄:32
职业:明星
地址:中国
姓名:刘德华
年龄:60
职业:明星
地址:中国
<script>
function creatperson(name,age,job,address){
var person = new Object();
person.name = name,
person.age = age,
person.address = address,
person.job = job,
person.show = function(){
var str = '姓名:'+this.name+'<br>'+'年龄:'+this.age+'<br>'+'职业:'+this.job+'<br>'+
'地址:'+this.address+'<hr>';
document.write(str);
}
return person;
}
var person1 = creat_user('黄晓明',32,'明星','中国');
var person2 = creat_user('刘德华',60,'明星','中国');
person1.show();
person2.show();
</script>
5.工厂模式的弊端
工厂模式创建对象有何弊端:
1、看不出内在联系
Javascript还提供了一个instanceof运算符,
验证原型对象与实例对象之间的关系 console.log(person1 instanceof createperson);
通过instanceof查看user1 和creat_user的关系:
console.log(person1 instanceof creatperson);
2、不变的内容,重复的调用
不变的内容(属性、方法)重复调用浪费资源
6.构造函数
*如何解决上述工厂模式的问题,js提出了一个解决的方法——构造函数;
为了解决从原型对象生成实例的问题,Javascript提供了一个构造函数(Constructor)模式。构造函数一般以大写字母开头;
构造函数也是函数,只不过可以用来创建对象,内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上。
在构造函数中使用this,this指向当前构造函数创建的实例
代码如下:
<script>
function Creatperson(name,age,address,job){
this.name = name,
this.age = age,
this.address = address,
this.job = job,
this.show = function(){
var str = '姓名:'+this.name+'<br>'+'年龄:'+this.age+'<br>'+'职业:'+this.job+'<br>'+
'地址:'+this.address+'<hr>';
document.write(str);
}
}
var person1 = new Creatperson('黄晓明',32,'中国','明星');
var person2 = new Creatperson('刘德华',60,'中国','明星');
person1.show();
person2.show();
console.log(person1 instanceof Creatperson);
</script>
代码运行显示如下:
姓名:黄晓明
年龄:32
地址:中国
职业:明星
姓名:刘德华
年龄:60
地址:中国
职业:明星
与工厂模式对比:
- 没有显式创建对象,创建对象使用的new 构造函数的方法
- 直接将属性和方法赋给了this对象
- 没有return
*Javascript提供了一个instanceof运算符,验证原型对象与实例对象之间的关系;
抽象的类叫原型;
具体的对象叫实例。
console.log(person1 instanceof Creatperson);
实例对象有一个constructor属性,来指向它们的构造函数。
//示例对象有一个constructor 属性,来指向他的构造函数
console.log(person1.constructor);
7.原型prototype
通过上面的构造函数,我们解决了实例和原型之间的关联,但是,不变的内容(属性、方法)重复调用浪费资源这一问题仍然没有解决
为了解决这一问题,引入使用新的知识——原型
- 每个构造函数都有一个prototype(原型)属性
- 是一个指针,指向一个对象
- 这个对象的所有属性和方法,都会被构造函数的实例继承(共享)。
- 这意味着,我们可以把那些不变的属性和方法,直接定义在prototype对象上。
通过原型改造一下代码:
<script>
function Creatperson(name, age, address, job) {
this.name = name,
this.age = age,
this.address = address,
this.job = job
}
Creatperson.prototype.show = function () {
var str = '姓名:' + this.name + '<br>' + '年龄:' + this.age + '<br>' + '职业:' + this.job + '<br>' +
'地址:' + this.address + '<hr>';
document.write(str);
}
var person1 = new Creatperson('黄晓明', 32, '中国', '明星');
var person2 = new Creatperson('刘德华', 60, '中国', '明星');
person1.show();
person2.show();
</script>
8.使用原型prototype对象封装cookie
create-function.js
//1.创建cookie构造函数
function cookie() {}
//setcookie把设置cookie的方法绑定在cookie的原型对象上
cookie.prototype.setcookie = function(key, val, time) {
var date = new Date();
date.setDate(date.getDate() + time);
document.cookie = key + '=' + val + ';expires=' + date;
}
//获取cookie
cookie.prototype.getcookie = function(key) {
var arry = document.cookie.split("; ");
for (var i = 0; i < arry.length; i++) {
var newarry = arry[i].split("=");
if (newarry[0] == key) {
return newarry[1];
}
}
}
//删除cookie
cookie.prototype.removecookie = function(key) {
this.setcookie(key, "", -1);
}
//删除所有的cookie
cookie.prototype.clearcookie = function() {
var arry = document.cookies.split("; ");
for (var i = 0; i < arry.length; i++) {
var newarry = arry[i].split("=");
this.setcookie(newarry[0], "", -1);
}
}
create-function.html
验证一下:
<script src="./create-function.js"></script>
<script>
var cookie = new cookie();
cookie.setcookie("username", "ldh")
cookie.setcookie("password", "123456")
cookie.setcookie("age", "19")
var username = cookie.getcookie("username");
var password = cookie.getcookie("password");
var age = cookie.getcookie("age");
document.write('用户名:' + username + '<br>' + '密码:' + password + '<br>' + '年龄:' + age);
cookie.removecookie(age);
// cookie.clearcookie();
</script>
三、总结
总结:
以上就是今天所学习的内容,本文介绍了面向对象的概念以及创建对象的方法,重要的是学会使用原型prototype对象封装cookie。