66ES6_对象模型

最新推荐文章于 2020-10-21 10:50:40 发布

weixin_33979203

最新推荐文章于 2020-10-21 10:50:40 发布

阅读量269

点赞数

文章标签： java javascript json ViewUI

原文链接：http://blog.51cto.com/jowin/2394710

版权

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

重写方法：

子类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

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]);

输出：

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

serialization constructor

point constructor

例，高阶对象实现：

将类的继承，构建成箭头函数；

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

转载于:https://blog.51cto.com/jowin/2394710

weixin_33979203

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
66ES6_对象模型

目录js对象模型：... 1定义类：... 1ES6之前：... 2ES6中的class：... 4重写方法：... 5静态属性：... 6静态方法：... 6this的坑：... 7解决对象中函数返回this指针不一样问题：... 91、显式传入，通过主动传入对象，就避开了this的问题：... 92、ES3（ES-262第三版）引入了apply、call方法：... ...
复制链接

扫一扫