一、创建对象
对象在内存空间中站两块位置,一个是堆,一个是栈,堆中存的对象,栈里面存的是对象的地址。
-
字面量(一次性的对象)
var obj = {}
obj.name = ‘lc’
obj.say = function () {
console.log(this.name)
}
obj.say() // ‘lc’
或者
var obj = {
name: 'lc',
say: function () {
console.log(this.name)
}
}
obj.say() // 'lc'
-
工厂模式(自定义构造函数创建对象)
//自定义构造函数
function Person(name,age){
this.name=name;
this.age=age;
this.sayHi=function(){
console.log(‘我的名字叫’+this.name+’,我今年’+this.age);
}
}
//创建对象
var obj=new Person(‘小刚’,12);
console.log(obj.name);
obj.sayHi();
自定义构造函数创建对象做了以下四件事:
1.在内存中开辟空间,存放创建的对象;
2.把this设置为当前的对象;
3.设置对象的属性和方法的值;
4.把this对象返回;
-
系统的构造函数(也叫作实例化对象)
var obj=new Object();
//添加属性
obj.name=‘zhangsan’;
obj.age=13;
obj.sayHi=function(){
console.log(‘阿里阿赛欧’)
}
//调用实例的方法
obj.sayHi(); -
原型
-
构造+原型
function Person () {
this.name = ‘lc’
}
Person.prototype = {
constructor: Person,
say: function () {
console.log(this.name)
}
}
var person = new Person() -
其他
参考 https://juejin.im/entry/58291447128fe1005cd41c52
二、Object静态属性
Object.defineProperty()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Object.keys()
Object.getOwnPropertyNames()
Object.getPrototypeOf()
三、继承
es5 中继承方法,记住一种即可
function extend (Child, Parent) {
var F = function () {}
F.prototype = Parent.prototype
Child.prototype = new F()
// 或者
// Child.prototype = Object.create(Parent.prototyp)
Child.prototype.contructor = Child
}
// 或者
/*
function extend (Child, Parent) {
Child.prototype = Object.create(Parent.prototyp)
Child.prototype.contructor = Child
}
*/
Function Parent () {
// todo
}
inherits(PrimaryStudent, Student);
function Child () {
// todo
}
Child.prototype.say = function () {
console.log(this)
}
原理:廖雪峰javascript 教程
四、类的知识
严格来见 javascript 中是没有类,所以,要了解类的知识,推荐使用typescript 或者 java
- 私有属性
- 私有方法
- 保护属性
- get 修饰符
由于 js 没有public private protect 修饰符,约定俗成:
- public,用$开头表示,对外可以被访问
- priavte、protected,用_开头表示,对外不可以被访问
es6 protected 如何去表示:
class Parent {
_name: 'l'
}
class Child {
constructor (_name) {
super(_name)
}
}
进阶 Watch 的实现
https://juejin.im/post/5b0408f2f265da0ba17cda08
五、js面向对象编程
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。
面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。
例如五子棋,面向过程的设计思路就是首先分析问题的步骤:1、开始游戏,2、黑子先走,3、绘制画面,4、判断输赢,5、轮到白子,6、绘制画面,7、判断输赢,8、返回步骤2,9、输出最后结果。把上面每个步骤用分别的函数来实现,问题就解决了。
而面向对象的设计则是从另外的思路来解决问题。整个五子棋可以分为 1、黑白双方,这两方的行为是一模一样的,2、棋盘系统,负责绘制画面,3、规则系统,负责判定诸如犯规、输赢等。第一类对象(玩家对象)负责接受用户输入,并告知第二类对象(棋盘对象)棋子布局的变化,棋盘对象接收到了棋子的i变化就要负责在屏幕上面显示出这种变化,同时利用第三类对象(规则系统)来对棋局进行判定。
可以明显地看出,面向对象是以功能来划分问题,而不是步骤。同样是绘制棋局,这样的行为在面向过程的设计中分散在了总多步骤中,很可能出现不同的绘制版本,因为通常设计人员会考虑到实际情况进行各种各样的简化。而面向对象的设计中,绘图只可能在棋盘对象中出现,从而保证了绘图的统一。
功能上的统一保证了面向对象设计的可扩展性。比如我要加入悔棋的功能,如果要改动面向过程的设计,那么从输入到判断到显示这一连串的步骤都要改动,甚至步骤之间的循序都要进行大规模调整。如果是面向对象的话,只用改动棋盘对象就行了,棋盘系统保存了黑白双方的棋谱,简单回溯就可以了,而显示和规则判断则不用顾及,同时整个对对象功能的调用顺序都没有变化,改动只是局部的。
再比如我要把这个五子棋游戏改为围棋游戏,如果你是面向过程设计,那么五子棋的规则就分布在了你的程序的每一个角落,要改动还不如重写。但是如果你当初就是面向对象的设计,那么你只用改动规则对象就可以了,五子棋和围棋的区别不就是规则吗?(当然棋盘大小好像也不一样,但是你会觉得这是一个难题吗?直接在棋盘对象中进行一番小改动就可以了。)而下棋的大致步骤从面向对象的角度来看没有任何变化。
当然,要达到改动只是局部的需要设计的人有足够的经验,使用对象不能保证你的程序就是面向对象,初学者或者很蹩脚的程序员很可能以面向对象之虚而行面向过程之实,这样设计出来的所谓面向对象的程序很难有良好的可移植性和可扩展性。
面向对象和面向过程都是编程思想,只是方式不一样;
面向过程:凡事都是亲力亲为,所有的代码都是自己去写,每一部都很清楚,注重的是过程;
面向对象:执行者成为指挥者,只要找对象,然后让对象去做相关的事情,注重的结果,面向对象的特性是继承封装和多态;
面向对象的编程思想:根据需求,抽象出相关的对象,总结对象的特征和行为,把特征变成属性,行为变成方法,然后定义构造函数,实例化对象,通过对象调用属性和方法,完成相应的需求;