js 面向对象以及原型及原型链
2019-09-03 22:51 孤城凉梦 阅读(527) 评论(0) 编辑 收藏 举报是一种编程思维
所有的程序中的参与的对象提取出来,给对象 设置不同的属性和方法
老师 小明 买豆浆
面向过程:
1,老师喊小明过来
2,小明过来
3,告诉小明去买豆浆
4,给你钱,告诉你记住找零钱
5,小明下楼到永和
6,小明排队
7,小明和营业小妹 沟通 买豆浆 给钱
8,营业员 收钱,找零 准备豆浆
9,小明等待
10,营业员给豆浆
11,小明拿豆浆 回来
12,给老师 零钱给老师
面向对象:
三个主体 老师 小明 和 营业员
老师:{
名字:"tony",
act1(){
xxxx
}
xxxx
xxxx
}
小明:{
}
营业员{
}
棋盘
面向对象优点:方便代码的管理,和封装 以及调用
面向过程
将程序 所有步骤:拆成一步一步
怎么将大象赛进冰箱
1,打开冰箱门
2,放进大象
3,关门
如何创建对象
1,字面量
var obj = {
属性:值,
属性2:值2,
方法:function(){
}
}
使用属性和方法
obj.属性名
obj.方法名
赋值
obj.属性名 = 值
obj.方法 = function(){}
2,系统构造函数 (创建对象) Object
var obj = new Object();
obj.属性=值
....
3,工厂函数创建对象
4,构造函数 创建对象
问题:
函数怎么调用:函数名()
另一种方法: new 函数名()
当new 一个函数会发生什么? 面试题
构造函数的缺点:
原型
构造函数有一个属性叫做 prototype 原型,属性就是对象(原型空间),可以将不同的对象的公共的属性和方法放到原型上,当我们new一个对象时,这个对象有一个属性 __proto__指向原型空间 的
只有构造函数时:
属性和方法定义在 构造函数中 通过this关键字定义 浪费内存
原型:
公共的属性和方法放到原型中 当我们new一个实例对象 原型中的属性和方法只会在内存中存储一份
实例对象中有一个属性 __proto__自动指向 他的构造函数的原型
原型上的属性和方法 可以直接通过 对象名.属性名得到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function Person(name,age){
this.name = name;
this.age = age;
}
// 原型
Person.prototype.act = function(){
alert(this.name+"吃饭");
}
var p1 = new Person("小明",16);
p1.act();
console.log(p1);
</script>
</body>
</html>
注意:
原型上的this指向也是 指向 实例对象的
总结:构造函数结合原型 一般会在构造函数上 定义属性 (理解变量),在原型中,定义方法(函数)
对象的constructor属性 得到实例对象的构造函数
instanceof 判断一个对象 是不是某个构造函数的的实例
实例对象.hasOwnProperty("属性") 判断一个属性 是不是实例对象自己的属性
原型链:
链:链式关系 一环扣一环
每个实例对象 有一个__proto__属性,指向它的构造函数的prototype属性
构造函数 往上也有构造函数 Function 构造函数的 __proto__指向 Function的prototype属性
....
这种层层 的链式关系 叫做原型链
面向对象的形式 写 选项卡:
对象 选项卡 Tab
属性: 变量 构造函数中定义
方法:切换方法 构造函数原型