博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第六章 面向对象的程序设计
阅读量:4696 次
发布时间:2019-06-09

本文共 12310 字,大约阅读时间需要 41 分钟。

 

属性类型

1.数据属性特性

[[Configurable]](可配置):能否通过delete删除属性重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。

[[Enumerable]](可枚举):能否通过for-in循环返回属性。

[[Writable]](可写):能否修改属性的值。

[[Value]](值):包含这个属性的数据值。读写属性值都再这,默认为undefined。

 

修改属性默认的特性,必须使用Object.defineProperty()方法。

Object.defineProperty(): 接受三个参数:属性所在的对象,属性的名字,描述符对象。属性描述符对象必须是 configurable、enumberable、writable、value。其中的一或多个。

var person = {};Object.defineProperty(person, "name", {    writable: false,               //设置为不可写的。(不能修改name的值)    configurable: false,           //设置为不可配置的,    value: "Nicholas"});console.log(person.name);
// Nicholas
delete person.name; console.log(person.name);
// Nicholas
person.name = "Gray"; //修改了name的值 console.log(person.name); //修改的值无效   // Nicholas

在调用Object.defineProperty(),如果不指定,configurable,wirtable,enumerable默认值为false.

 

2、访问器属性

访问器属性不包含数据值。包含一对getter函数和setter函数。

 

[[Configurable]](可配置):能否通过delete删除属性重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性。

[[Enumerable]](可枚举):能否通过for-in循环返回属性。

[[Get]]:读取属性时调用的函数。

[[Set]]: 写入属性时调用的函数。

var book = {  _year: 2004,           //_表示只能通过对象方法访问的属性   edition: 1 } Object.defineProperty(book, "year", {     get: function() {         return this._year;     },     set: function(newValue) {        if(newValue > 2004) {          this._year = newValue;          this.edition += newValue - 2004;        }    }  });book.year = 2005;console.log(book.edition);// 2

 

IE9之前创建访问器属性的方法:

var book = {    _year: 2004,    edition: 1}book.__defineGetter__("year", function(){     return this._year;});book.__defineSetter__("year", function(newValue) {    if(newValue > 2004) {      this._year = newValue;      this.edition +=newValue - 2004;    }});book.year = 2005;console.log(book.edition);// 2

 

Object.defineProperties(): 通过描述符一次定义多个属性。接受2个对象参数:第一个对象是要添加和修改其属性的对象,第二个对象的属性与第一个对象中要添加或修改的属性对应。

var book = {};Object.defineProperties(book, {     _year: {        writbale: true,        value: 2004    },    edition: {       writable: true,       value: 1   },      year: {      get: function() {         return this._year;      },     set: function(newValue) {       if(newValue > 2004) {         this._year = newValue;         this.edition += newValue - 2004;       }    }  }      });book.year = 2007;console.log(book.edition);var descriptor = Object.getOwnPropertyDescriptor(book,"_year");console.log(descriptor.value);//  4//  2004//  false

创建对象

1.工厂模式

工厂模式解决了创建多个相似对象的问题。没有解决对象识别的问题(怎样指定一个对象的类型)。

function createPerson(name, age, job) {  var o = new Object();  o.name = name;  o.age = age;  o.job = job;  o.sayName = function() {    console.log(this.name);   };  return o;}var person1 = createPerson("zhangsan", 28, "Software Engineer");var person2 = createPerson("李四", 25, "Docter");console.log(person1.name);console.log(person2.name);//  zhangsan//  李四

 

2.构造函数模式

构造函数始终都应该以一个大写字母开头,非构造函数以小写字母开头。以这种方式定义的构造函数是定义再Global对象,再浏览器即window对象下。

function Person(name, age, job) {    this.name = name;    this.age = age;    this.job = job;    this.sayName = function() {        console.log(this.name);    }}var person3 = new Person("Nicholas", 27, "Software Enginner");   var person4 = new Person("Gray", 25, "Docter");console.log(person3.name);console.log(person4.name);

console.log(person3 instanceof Object);

console.log(person3 instanceof Person);
console.log(person4 instanceof Object);
console.log(person4 instanceof Person);

// Nicholas

// Gray
// true
// true
// true
// true

调用 Person构造函数经历了以下4个步奏:

1.创建一个新对象。

2、将构造函数的作用域赋给新对象(这里的新对象是person3,this指向person3)

3、执行构造函数中的代码。

4.返回新对象。

构造函数的优点:将来可以将它的实例标识为一直特定的类型。

构造函数的缺点:每个方法都要再每个实例上重新创建一遍。函数也是对象,每定义一个函数,即实例化了一个对象。

 

原型模式

创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象。即原型对象。作用是让所有对象实例共享它包含的属性和方法。

function Person() { }Person.prototype.name = "Nicholas";                              Person.prototype.age = 27;Person.prototype.job = "Software Enginner";Person.prototype.sayName = function() {   console.log(this.name);};//将所有属性和方法直接添加到prototype原型中。这里的Person.prototype.constructor指向他的构造函数,即Personvar person1 =new Person();person1.sayName();// Nicholas var person2 = new Person();person2.sayName();// Nicholasconsole.log(person1.sayName === person2.sayName);// true  person1实例和person2实例访问的都是同一组属性和同一个sayName()函数

原型对象自动获得一个constructor属(构造函数)性,constructor包含一个指向prototype属性所在的函数的指针。

EC5 把这个指针叫[[prototype]]。这个链接存在于实例与构造函数的原型对象之间。

可以用isPrototyOf():确认实例和构造函数之间是否存在这种关系。

console.log(Person.prototype.isPrototypeOf(person1));console.log(Person.prototype.isPrototypeOf(person2));// true 用原型对象测试person1和person2.它们内部都有一个指向Person.prototype的指针。// true

Object.getPrototypeOf(): 返回[[prototype]]值。

console.log(Object.getPrototypeOf(person1) == Person.prototype);console.log(Object.getPrototypeOf(person1).name);// true// Nicholas

 

通过对象的实例可以访问原型中的值,不能通过对象实例重写原型中的值,再实例中定义的同名属性的值,会屏蔽原型中的值。但是不会修改原型中的值。

function Person() { }Person.prototype.name = "Nicholas";Person.prototype.age = 27;Person.prototype.job = "Software Enginner";Person.prototype.sayName = function() {   console.log(this.name);};var person1 =new Person();person1.sayName();var person2 = new Person();person2.name = "张三";console.log(person1.name);console.log(person2.name);//  Nicholas//  Nicholas        来着原型//  张三            来自实例

 

hasOwnProperty():用于检测一个属性是存在于实例还是原型中。从Object继承而来。在实例中返回true,在原型中返回false;

console.log(person1.hasOwnProperty("name"));console.log(person2.hasOwnProperty("name"));// false 来自原型// true 来自实例

Object.keys(): 取的对象中所有可枚举的实例属性,接受一个参数:一个对象。返回一个包含所有可枚举属性的字符串数组。

function Person() { }Person.prototype.name = "张三";Person.prototype.age = 25;Person.prototype.job = "Software Enginner";Person.prototype.sayName = function() {   console.log(this.name);     };var keys = Object.keys(Person.prototype);console.log(keys);var p1 = new Person();p1.name = "Rob";p1.age = 27;var p1keys = Object.keys(p1);console.log(p1keys);//  ["name", "age", "job", "sayName"]//  ["name", "age"]//如果要得到所有的实例属性不论是否可枚举,可使用Object.getOwnPropertyNames()var keys1 = Object.getOwnPropertyNames(Person.prototype);console.log(keys1);//[”constructor“, "name", "age", "job", "sayName"]

 

更简介的原型语法

function Person() {}Person.prototype = {  name: "张三",  age: 27,  job: "Software Enginner",  sayName: function() {      console.log(this.name);  }};

这种形式的原型语法和之前的原型语法结果一样,但是constructor不在指向原型对象的函数。可以通过显式的设置,让它指向正确。

但是Enumerable特性被设置为:true;

function Person() {}Person.prototype = { constructor: Person,  //显式的设置constructor值  name: "张三",  age: 27,  job: "Software Enginner",  sayName: function() {      console.log(this.name);  }}; Object.defineProperty(Person.prototype,"constructor", {       enumerable: false,       value: Person});

原型模式的问题

1、所有实例默认情况下都将取的相同的值。

2、在其中一个实例中的修改,会影响其他的实例的属性。像一个实例中添加属性,不是同名的字符串,都是再原型中添加。

function Person() {}Person.prototype = {  name: "张三",  age: 27,  job: "Software Enginner",  friends: ["Shelby", "Court"],  sayName: function() {      console.log(this.name);  }};Object.defineProperty(Person.prototype,"constructor", {       enumerable: false,       value: Person});var person3 = new Person();var person4 = new Person();person3.friends.push("Van");console.log(person3.friends);console.log(person4.friends);// ["Shelby", "Court", "Van"]// ["Shelby", "Court", "Van"]

 

构造函数与原型混成的模式,是最广泛,认同度最高的一直创建自定义类型的方法。

function Person(name, age, job) {    this.name = name;    this.age = age;    this.job = job;    this.friends = ["Shely", "Court"];}Person.prototype = {      constructor: Person,      sayName: function() {           console.log(this.name);      }};var person1 = new Person("张三", 24, "Docter");var person2 = new Person("李四", 25, "后台");person1.friends.push("刘五");console.log(person1.friends);console.log(person2.friends);console.log(person1.friends === person2.friends);// ["Shely", "Court", "刘五"]// ["Shely", "Court"]// false

 继承

EC只支持实现继承,实现继承依靠原型链来实现。利用原型让一个引用类型继承另一个引用类型的属性和方法。

实现原型链的基本模式

function SuperType() {   this.property = true;   }SuperType.prototype.getSuperValue = function() {    return this.property;   };           //在SuperType的原型中定义一个方法  function SubType() {    this.subproperty = false;                        }SubType.prototype = new SuperType();              //把superType当作实例,赋给SubType的原型,(实例对象包含一个指针[[prototype]],指向构造函数的原型对象),SubType继承了 SuperTypeSubType.prototype.getSubValue  = function() {     //为SubType添加了一个新方法       return this.subproperty;    };  //重新父原型中的方法 代码需放在替换原型的语句之后SuperType.prototype.getSuperValue = function() {
return false;

  }

var instance = new SubType();console.log(instance.getSuperValue());//   false

 原型链继承的缺点:

1.包含引用类型值的原型属性会被所有实例共享;

2.没有办法在不影响所有对象实例的情况下,给父原型对象的构造函数传递参数。

function SuperType() {  this.color = ["yellow", "blue", "green", "red"];}function SubType() {}SubType.prototype = new SuperType();var instance1 = new SubType();instance1.color.push("black");console.log(instance1.color);var instance2 = new SubType();console.log(instance2.color);//  ["yellow", "blue", "green", "red", "black"]//  ["yellow", "blue", "green", "red", "black"]

 

借用构造函数

即在子类型构造函数的内部调用超类型构造函数。函数只不过是在特定环境中执行代码的对象,通过使用call()或apply()方法在新创建的对象上执行构造函数。

function colorsItem() {   this.color = ["red", "blue", "green"];}function colorsItem2 () {   colorsItem.call(this);                 //借调“colorsItem”构造函数,实际上是在colorItem2的实例下调用“colorsItem”构造函数}var instance3 = new colorsItem2();       // 实例化一个对象instance3.color.push("black");           //  在 colorsItem2的其中一个实例中执行colorsItem2的初始化代码,顺便把一个值推进副本中去。每个实例化对象都拥有各自的color属性的副本console.log(instance3.color);var instance4 = new colorsItem2();console.log(instance4.color);// ["red", "blue", "green", "black"]// ["red", "blue", "green"]

组合继承

使用原型链实现原型属性和方法的继承,通过借用构造函数实现对实例属性的基础。

在原型上定义方法实现函数复用,又能够保证每个实例有自己的属性。

function SuperType1(name) {  this.name = name; this.colors = ["red", "blue", "yellow"];}SuperType1.prototype.sayName = function () {      console.log(this.name);}function SubType1(name, age) {   SuperType1.call(this, name);   this.age = age; }SubType1.prototype = new SuperType1();SubType1.prototype.consctructor = SubType1;SubType1.prototype.sayAge = function() {   console.log(this.age);}var instances = new SubType1("张三", 27);instances.colors.push("black");console.log(instances.colors);instances.sayName();instances.sayAge();// ["red", "blue", "yellow", "black"]// 张三// 27var instances1 = new SubType1("李斯", 25);console.log(instances.colors);instances1.sayName();instances1.sayAge();// ["red", "blue", "yellow", "black"]// 李斯// 25

优点: 可以让不同的实例分别拥有自己的属性又可以使用不同的方法。instanceof和isPrototypeOf()也能识别基于组合继承创建的对象。也是最常用的继承模式。

缺点: 会调用俩次超类型函数,一次是创建子类型函数,另一次在子类型函数内部。

原型式继承

 EC5的Object.create()方法:接受2个参数:用作新对象原型的对象和(可选)一个为心对定义额外属性的对象;

var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"] };var anotherPerson = Object.create(person, {     name: {        value: "Greg"     }});console.log(anotherPerson.name);// Greg

寄生式继承

创建一个用于封装继承过程的函数, 该函数在内部以某种方式来增强对象,最后再像针对是它做了所有工作一样返回对象。

function createAnother(original) {   var clone = object(original);   clone.sayHi = function() {        console.log("Hi");    };    return clone;}var person = {    name: "Nicholas",    friends: ["Shelby", "Court", "Van"] };var anotherPerson = createAnother(person);anotherPerson.sayHi();// Hi

寄生组合继承

组合继承会调用俩次超类型函数,一次是创建子类型函数,另一次在子类型函数内部。

function SuperType (name) {   this.name = name;   this.colors = ["red", "blue", "green"];}SuperType.prototype.sayName = function() {     console.log(this.name); };function SubType (name, age) {   SuperType.call(this, name);          //第二次调用           this.age = age;  }SubType.prototype = new SuperType();    //第一次调用SubType.prototype.constructor = SubType;SubType.prototype.sayAge = function () {    console.log(this.age);};

第一次调用,SubType得到俩个属性,SuperType构造函数的color 和name属性。调用SubType又会再一次调用SuperType构造函数。这一次在新对象上创建实例属性name和color,这俩个同名属性屏蔽了原型中的同名属性。

寄生组合式继承: 通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

思路:使用寄生式继承来继承超类型的原型,将结果指定给子类型的原型。

寄生组合式继承的模式 是引用类型最理想的继承范式

function inheritPrototype(SubType, SuperType) {        var prototype = Object(SuperType.prototype);       //创建对象,创建超类型原型的一个副本        prototype.consctructor = SubType;                   //增强对象  为创建的副本添加constructor属性        SubType.prototype = prototype;                      //指定对象  将新创建的对象赋值给子类型的原型。   } function SuperType(name) { this.name = name; this.colors = ["red", "blue", "yellow"]; } SuperType.prototype.sayName = function() { console.log(this.name); }; function SubType(name, age) { SuperType.call(this, name); this.age = age; } inheritPrototype(SubType, SuperType); Subtype.prototype.sayAge = function () { console.log(this.age); };

 

 

 

 

转载于:https://www.cnblogs.com/zhangbaihua/p/5569221.html

你可能感兴趣的文章
获取包含中文字符串的长度、截取包含中文的字符串
查看>>
unity编辑器学习,创建自己的窗口
查看>>
Microsoft Build 2015
查看>>
使用EntityFrameWork 5.0增删查改(&分页,连表)
查看>>
ios block常见的错误(三)——并发编程的block引用
查看>>
Arcgis Server发布的带有透明度的地图服务,调用时不显示透明度问题
查看>>
Android Loader详解(官方文档翻译)
查看>>
[Java]ArrayList源码分析
查看>>
Mybatis中javaType和jdbcType对应关系
查看>>
Master Concept provides Professional Service for server and storage virtualization.
查看>>
客户端javascript笔记
查看>>
工作笔记——前端分页数据回显
查看>>
test小结
查看>>
Apache 调用不同的 PHP 版本
查看>>
第三周总结
查看>>
流程控制与数组
查看>>
python循环导入的解决方案
查看>>
AngularJS中选择样式
查看>>
JDK的命令具体解释操作
查看>>
创建图书管理项目
查看>>