目录
js对象模型:... 1
定义类:... 1
ES6之前:... 2
ES6中的class:... 4
重写方法:... 5
静态属性:... 6
静态方法:... 6
this的坑:... 7
解决对象中函数返回this指针不一样问题:... 9
1、显式传入,通过主动传入对象,就避开了this的问题:... 9
2、ES3(ES-262第三版)引入了apply、call方法:... 9
3、ES5引入了bind方法:... 10
4、ES6引入支持this的箭头函数:... 11
高阶对象(高阶类,或称mixin模式);... 12
js对象模型:
js是一种基于prototype原型的面向对象语言,而不是基于类的面向对象语言;
C++和JAVA有class和instance的概念,是一类事物的抽象,而实例是类的实体;
js是基于prototype的语言,它只有原型对象的概念,原型对象就是一个模板,新的对象从这个模板构建从而获取最初的属性,任何对象在运行时可动态的增加属性,且任何一个对象都可作为另一个对象的原型,这样后者可共享前者的属性;
定义类:
字面式声明方式(字面值创建对象):
js1.2开始支持,类似py的字典,另稍变化就是json;
var obj = {
property_1: value_1,
property_2: value_2,
...,
"property_n": value_n
}
property may be an identifier,or a number,or a string
例:
var obj = {
a:'abc',
'b': 'bcd'
};
console.log(obj.a);
console.log(obj.b);
输出:
abc
bcd
例:
function A(x) {
console.log('A class');
this.x = x; //parameters,借助this创建对象属性
}
console.log(typeof(A));
a = A(100); //普通函数
console.log(a);
a = new A(100); //借助new关键字,把A函数作为原型构建出实例,A函数即构造器
console.log(a);
输出:
function
A class
undefined
A class
A { x: 100 }
ES6之前:
定义一个函数(构造器)对象,使用this定义属性;
用new关键字和构造器创建一个新对象;
用new构建一个新的通用对象,new操作符会将新对象的this值传递给Point3D函数,函数为这个对象创建z属性;
new后得到一个对象,用这个对象的this来调用构造器;
如何执行基类的构造方法,用call()方法,传入子类的this,即Point3D对象的this来执行Point3D的构造器;
例:
function Point(x,y) {
this.x = x;
this.y = y;
this.show = () => console.log(this,this.x,this.y);
}
console.log(Point);
p1 = new Point(4,5); //类的实例化;若用p1=Point(4,5),可理解为py中返回值为None,None.show报错
console.log(p1);
p1.show();
function Point3D(x,y,z) {
Point.call(this,x,y); //继承,用call()
this.z = z;
console.log('Point3D...');
}
console.log(Point3D);
p2 = new Point3D(7,8,9); //类的实例化
console.log(p2);
p2.show(); //继承的show
输出:
[Function: Point]
Point { x: 4, y: 5, show: [Function] }
Point { x: 4, y: 5, show: [Function] } 4 5
[Function: Point3D]
Point3D...
Point3D { x: 7, y: 8, show: [Function], z: 9 }
Point3D { x: 7, y: 8, show: [Function], z: 9 } 7 8
ES6中的class:
从ES6开始,提供了class关键字,使得创建对象更加简单、清晰;
1、类定义使用class关键字,创建的本质上还是函数,是一个特殊的函数;
2、一个类只能拥有一个名为constructor的构造器方法,类似py的__init__(),如果没有显式的定义一个构造方法,则会添加一个默认的constructor方法;
3、继承使用extends关键字;
4、一个构造器可使用super关键字来调用一个父类的构造函数;
5、类没有私有属性,class语句块中不允许使用let、var等关键字定义私有变量;
例:
class Point { //class语句块中不允许使用let、var等关键字定义私有变量
constructor (x,y) {
this.x = x;
this.y = y;
}
show() {
console.log(this,this.x,this.y);
}
}
p1 = new Point(4,5);
console.log(p1);
p1.show();
class Point3D extends Point {
constructor (x,y,z) {
super(x,y);
this.z = z;
}
// show() { //重写
// console.log(this,this.x,this.y,this.z);
// }
show() { //重写,方式1
super.show();
console.log(this.z);
}
}
p2 = new Point3D(7,8,9);
console.log(p2);
p2.show()
输出:
Point { x: 4, y: 5 }
Point { x: 4, y: 5 } 4 5
Point3D { x: 7, y: 8, z: 9 }
Point3D { x: 7, y: 8, z: 9 } 7 8
9
重写方法:
子类Point3D的show方法需要重写;
方式1:
用方法方式定义,函数名同名覆盖即可,和参数没关系;
如果需要使用父类的方法,用super.method()的方式调用,如super.show();
方式2:
用属性方式定义,用箭头函数方式;
父类中若用属性定义,子类应和父类一致;
若两种方式都有,优先使用属性定义的;
若父类和子类中只用方法定义了,则子类的show()覆盖了父类的show();
总结:
父类、子类使用同一种方式的类定义方法,子类覆盖父类;
若父类使用属性方式,子类使用方法方式,则使用父类的属性方式;
若父类使用方法方式,子类使用属性方式,则使用子类的属性方式;
一句话,优先使用属性;
例:
class Point {
constructor (x,y) {
this.x = x;
this.y = y;
}
show() {
console.log(this,this.x,this.y);
}
}
class Point3D extends Point {
constructor (x,y,z) {
super(x,y);
this.z = z;
this.show = () => console.log('show',this.x,this.y,this.z);
}
show() {
super.show();
console.log('===', this.z);
}
}
p2 = new Point3D(7,8,9);
console.log(p2);
p2.show()
输出:
Point3D { x: 7, y: 8, z: 9, show: [Function] }
show 7 8 9
静态属性:
目前还没得到很好的支持;
静态方法:
在方法名前加上static;
实例不能直接访问静态方法,和C++、java一致;
实例要通过constructor访问静态方法,如p2.constructor.print();;
静态的概念与py的静态不同,相当于py的类变量;
例:
class Point3D extends Point {
constructor (x,y,z) {
super(x,y);
this.z = z;
this.show = () => console.log('show',this.x,this.y,this.z);
}
show() {
super.show();
console.log('===', this.z);
}
static print() {
return 'Point3D';
}
}
p2 = new Point3D(7,8,9);
console.log(Point3D.print());
// console.log(p2.print()); //X,实例访问静态方法要通过constructor,p2.constructor.print()
console.log(p2.constructor.print());
// Point3D.show() //X
输出:
Point3D
Point3D
this的坑:
js、c、java一样有this,但js的表现是不同的;
c、java是静态编译型语言,this是编译期绑定;
js是动态语言,运行期绑定;
js中,函数执行时,会开启新的执行上下文环境ExecutionContext;
创建this属性,具体this是什么要看函数是怎么调用了;
1、myFunction(1,2,3),普通函数调用方式,this是指向global对象,nodejs的global或browser的window;
2、myObject.myFunction(1,2,3),对象方法的调用方式,this指向包含该方法的对象;
3、call和apply方法调用,要看第一个参数是谁;
例:
先用function定义函数,不要用箭头函数;
var school = {
name:'magedu',
getNameFunc:function() {
console.log(this.name); //此处的this相当于py的self(替代构建出的实例本身),相当于school
console.log(this);
return function() {
console.log(this == global); //true,此处的this与school无关,两处的this指针不一样了,是普通函数调用,普通函数调用和对象的调用是两码事;解决1,在call()方法中指定school对象;解决2,显式传参
return this.name;
};
}
};
console.log(school.getNameFunc()());
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
true
undefined
例:
method = school.getNameFunc;
func = method.call(school);
console.log(func()) //这三句等价于console.log(school.getNameFunc()());
method = school.getNameFunc();
console.log(method()) //这2句等价于console.log(school.getNameFunc()());
例:
method = school.getNameFunc; //这样会把this丢了
func = method();
console.log(func.call(school));
例:
method = school.getNameFunc();
console.log(method.call(school));
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
false
magedu
解决对象中函数返回this指针不一样问题:
bind方法常用;
1、显式传入,通过主动传入对象,就避开了this的问题:
var school = {
name:'magedu',
getNameFunc:function () {
console.log(this.name);
console.log(this);
return function (that) {
console.log(that == global);
return that.name;
};
}
};
console.log(school.getNameFunc()(school));
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
false
magedu
2、ES3(ES-262第三版)引入了apply、call方法:
apply、call方法都是函数对象的方法,第一参数都是传入对象引入的;
查看apply、call、bind源码;
apply传其它参数需要使用数组,如func.apply(school,[1,2,3]);;
call传其它参数需要使用可变参数收集,如func.call(school,1,2,3);;
var school = {
name:'magedu',
getNameFunc:function () {
console.log(this.name);
console.log(this);
return function () {
console.log(this == global);
return this.name;
};
}
};
// console.log(school.getNameFunc().call(school));
console.log(school.getNameFunc().apply(school));
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
false
magedu
例:
function Print() {
this.print = function (x,y) {console.log(x+y)};
}
p = new Print(1,2);
p.print(10,20);
p.print.call(p,10,20);
p.print.apply(p,[10,20]);
输出:
30
30
30
3、ES5引入了bind方法:
bind方法来设置函数的this值;
bind后返回一个新的函数,要再次调用,像py的partial返回function;
apply、call,调用时第一个参数传入this,之后的传入的其它参数不同,apply要求是数组,call要求是可变参数;
bind是先绑定this,调用时直接用;
var school = {
name:'magedu',
getNameFunc:function () {
console.log(this.name);
console.log(this);
return function () {
console.log(this == global);
return this.name;
};
}
};
// console.log(school.getNameFunc().bind(school)); //X,此种写法不对,bind方法绑定后会返回新的函数
var method = school.getNameFunc();
// console.log(method);
var boundmethod = method.bind(school); //bind绑定后返回新的函数
// console.log(boundmethod);
console.log(boundmethod());
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
false
magedu
4、ES6引入支持this的箭头函数:
var school = {
name:'magedu',
getNameFunc:function () {
console.log(this.name);
console.log(this);
return () => {
console.log(this == global);
return this.name;
};
}
};
console.log(school.getNameFunc()());
// method = school.getNameFunc(); //等价于console.log(school.getNameFunc()());
// console.log(method());
输出:
magedu
{ name: 'magedu', getNameFunc: [Function: getNameFunc] }
false
magedu
ES6新的定义方式:
class school {
constructor () {
this.name = 'magedu';
}
getNameFunc() {
console.log(this.name);
console.log(this);
return () => {
console.log(this == global);
return this.name;
};
}
}
console.log(new school().getNameFunc()()); //class定义的必须用new实例化
// method = new school(); //等价于console.log(new school().getNameFunc()());
// func = method.getNameFunc();
// console.log(func());
输出:
magedu
school { name: 'magedu' }
false
magedu
高阶对象(高阶类,或称mixin模式);
mixin混合模式,这是一种不用继承就可复用的技术,主要为解决多重继承的问题,多继承的继承路径是个问题;
js是基于对象的,类和对象都是对象模板;
mixin指将一个对象的全部或部分拷贝到另一个对象上去,其实就是属性了;
可将多个类或对象混合成一个类或对象;
例,继承实现:
class Serialization {
constructor () {
console.log('serialization constructor');
if (typeof(this.stringify) !== 'function') {
throw new ReferenceError('should define stringify');
}
}
}
class Point extends Serialization {
constructor (x,y) {
super();
console.log('point constructor');
this.x = x;
this.y = y;
}
stringify () {
return `<point ${this.x}.${this.y}>`;
}
}
class Point3D extends Point {
constructor (x,y,z) {
super(x,y); //必须显式的调用父类的构造器,惯例,子类的constructor的第一句就是super();这点与java不一样,java中如果不写此句会隐式的调用父类的构造器
this.z = z;
}
stringify () {
return `<point3D ${this.x}.${this.y}.${this.z}>`;
}
}
// s = new Serialization(); //父类中无stringify,报错
p1 = new Point(4,5);
console.log(p1.stringify());
p2 = new Point3D(7,8,9);
console.log(p2.stringify());
输出:
serialization constructor
point constructor
<point 4.5>
serialization constructor
point constructor
<point3D 7.8.9>
例,高阶对象实现:
将类的继承,构建成箭头函数;
class Ojbect {
constructor () {
console.log('object constructor');
}
}
class A extends Ojbect {}; //普通继承
console.log(A);
const B = class extends Object { //匿名继承
constructor () {
super();
console.log('B constructor');
}
}
console.log(B);
b = new B(); //实例化
// const C = function Sup() {
// return class extends Sup { //等价于return X = class extends Sup {};
// constructor () {
// super();
// console.log('C construcotr');
// }
// };
// };
// const C = Sup => {
// return class extends Sup {
// constructor () {
// super();
// console.log('C construcotr');
// }
// };
// };
const C = Sup => class extends Sup { //箭头函数,参数是类,返回值也是类;注意以上几种形式的变化
constructor () {
super();
console.log('C constructor');
}
};
c = console.log(C);
cls = C(Object); //C本身是一普通函数,在调用后才返回一个带constructor的类,才可new,所以c = new C(Object)会报错;
c = new cls();
console.log(c);
输出:
[Function: A]
[Function: B]
B constructor
[Function: C]
C constructor
{}
例:
const Serialization = Sup => class extends Sup {
constructor (...args) {
super(...args);
console.log('serialization constructor');
if (typeof(this.stringify) !== 'function') {
throw ReferenceError('should define stringify');
}
}
};
class Point {
constructor (x,y) {
console.log('point constructor');
this.x = x;
this.y = y;
}
stringify () {
return `<Point ${this.x}.${this.y}>`;
}
}
class Point3D extends Serialization(Point) { //Serialization(Point)是一个匿名箭头函数调用,返回一个新的类型,高阶类,Point3D继承这个新的匿名类型,增强了功能,React框架大量采用了这种mixin技术
constructor (x,y,z) {
super(x,y);
console.log('point3d constructor');
this.z = z;
}
stringify () {
return `<Point3d ${this.x}.${this.y}.${this.z}>`;
}
}
p2 = new Point3D(4,5,6);
console.log(p2.stringify());
输出:
point constructor
serialization constructor
point3d constructor
<Point3d 4.5.6>
转载于:https://blog.51cto.com/jowin/2394710