深入JavaScript对象(Object)与类(class)，详细了解类、原型

 1 // 不使用new命令实现js类的设计模式
 2 var Foo = {
 3     init:function(who){
 4         this.me = who;
 5     },
 6     identify:function(){
 7         return "I am " + this.me;
 8     }
 9 };
10 var Bar = Object.create(Foo); //创建一个空对象，将对象原型指向Foo
11 Bar.speak = function(){
12     console.log("Hello," + this.identify() + ".");
13 };
14 var b1 = Object.create(Bar);    //创建b1对象
15 var b2 = Object.create(Bar);    //创建b2对象
16 b1.init("b1");    //b1初始化对象参数
17 b2.init("b2");    //b2初始化对象参数
18 
19 b1.speak(); //Hello,I am b1.
20 b2.speak(); //Hello,I am b1.

 1 //ES6构造函数
 2 class C{
 3     constructor(name){
 4         this.name = name;
 5         this.num = Math.random();
 6     }
 7     rand(){
 8         console.log(this.name + " Random: " + this.num);
 9     }
10 }
11 var c1 = new C("他乡踏雪"); //创建对象并且传参初识化
12 c1.rand(); //他乡踏雪 Random: 0.3835790827213281

 1 // ES6中class实现类与对象的继承示例 （属性名没有根据示图来实现，因为这里没有实现私有属性）
 2 class Foo{
 3     static a ; //静态属性a
 4     static b = "b" //静态属性b
 5     static c(){ //静态方法C
 6         console.log(this.a,this.b);
 7     }
 8     constructor(name,age){     //构造函数
 9         this.name = name;    //定义公共属性name
10         this.age = age;        //定义公共属性age
11     }
12     describe (){
13         console.log("我是" + this.name + ",我今年" + this.age + ".");
14     }
15 }
16 class Bar extends Foo{
17     constructor(name,age,tool,comeTrue){
18         super(name,age);     //实现继承,构造Foo实例指向Bar.prototype
19         this.tool = tool;    //添加自身的公共属性
20         this.comeTrue = comeTrue;    //添加自身的公共属性
21     }
22     toolFu(){
23         console.log("我有" + this.tool + ",可以用来" + this.comeTrue);
24     }
25 }
26 Foo.a = 10; //Foo类给自身的静态属性a赋值
27 Bar.a = 20; //Bar类给继承来静态属性a赋值
28 Foo.c(); //10 "b" //Foo调用自身的静态方法
29 Bar.c(); //20 "b" //Bar调用继承的静态方法
30 let obj = new Bar("小明",6,"画笔","画画"); //实例化Bar对象
31 let fObj = new Foo("小张",5);   //实例化Foo对象
32 obj.describe(); //我是小明,我今年6.
33 fObj.describe(); //我是小张,我今年5.
34 obj.toolFu(); //我有画笔,可以用来画画

 1 //多态 
 2 class Foo{
 3     fun(){
 4         console.log("我是父级类Foo上的方法");
 5     }
 6 }
 7 class Bar extends Foo{
 8     constructor(){
 9         super();
10     }
11     fun(){
12         console.log("我是子类Bar上的方法");
13     }
14 }
15 class Coo extends Foo{
16     constructor(){
17         super();
18     }
19     fun(){
20         console.log("我是子类Coo上的方法");
21     }
22 }
23 var foo = new Foo();
24 var bar = new Bar();
25 var coo = new Coo();
26 foo.fun();    //我是父级类Foo上的方法
27 bar.fun();    //我是子类Bar上的方法
28 coo.fun();    //我是子级类Coo上的方法

1 var obj = {
2     a:10
3 };
4 var obj1 = Object.create(obj);
5 obj1.a++;
6 console.log(obj.a);//10
7 console.log(obj1.a);//11

1 var obj = {
2     a:[1,2,3]
3 };
4 var obj1 = Object.create(obj);
5 obj1["a"].push(4);
6 console.log(obj.a);//[1,2,3,4]
7 console.log(obj1.a);//[1,2,3,4]

 1 var obj = {
 2     a:2
 3 }
 4 function Foo(){
 5     this.b = 10
 6 }
 7 Foo.prototype = obj; //将构造函数Foo的prototype指向obj
 8 var obj1 = new Foo(); //通过构造函数Foo生成obj1，实质上由Foo执行时产生的VO中的this生成，函数通过new执行对象创建时，this指向变量对象上的this
 9 console.log(obj1.a);//2 //a的属性自来原型obj
10 console.log(obj1.b);//10 

 1 var obj = {
 2     a:2
 3 }
 4 function Obj(){
 5     this.__proto__ = obj; //构造函数内部通过this.__proto__修改原型指向
 6     this.b = 10
 7 }
 8 var obj1 = new Obj();
 9 console.log(obj1.a);//2
10 console.log(obj1.b);//10

 1 var obj = {
 2     a:2
 3 }
 4 // 对象原型读写原理，但是不能通过字面量的方式实现，下面这种写法非法
 5 var ojb1 = {
 6     set __proto__(value){
 7         this.__proto__ = value;
 8     },
 9     get __proto__(){
10         return this.__proto__;
11     },
12     b:10
13 }
14 ojb1.__proto__ = obj;

 1 function ObjFun(name){
 2     this.name = name;
 3 }
 4 function ObjFoo(name,age){
 5     fun.prototype = new ObjFun(name);
 6     function fun(age){
 7         this.age = age;
 8     }
 9     return new fun(age);
10 }
11 var obj1 = new ObjFoo("小明")
12 var obj2 = ObjFoo("小红",18);
13 
14 console.log(obj1.name + "--" + obj1.age + "--" + obj1.constructor); //指向ObjFun
15 console.log(obj2.name + "--" + obj2.age + "--" + obj2.constructor); //指向ObjFun

 1 Father.prototype.lastName = "Deng"; 
 2 function Father(){}
 3 function Son(){}
 4 function inherit(Targe,Origin){ //实现共用原型的方法
 5     Targe.prototype = Origin.prototype; //将Origin的原型作为公有原型
 6 }
 7 inherit(Son,Father);//实现原型共享,这里的公有原型对象是Father.prototype
 8 var son = new Son();
 9 var father = new Father();
10 console.log(son.lastName);//Deng
11 console.log(father.lastName);//Deng

1 function inherit(Target,Origin){
2     function F(){};
3     F.prototype = Origin.prototype;
4     Target.prototype = new F();
5     Target.prototype.constructor = Target;
6     Target.prototype.uber = Origin.prototype;
7 }