关闭

Javascript面向对象的程序设计

时间: 2018-09-29阅读: 487标签: 设计

最近因为在给一个小同学做学习计划,所以也记录一些知识点,便于后面的同学的学习交流。这篇文章是关于JavaScript的面向对象的程序设计,主要从三个方面来介绍,1. 理解对象属性; 2. 理解并创建对象; 3. 理解继承


一、理解对象属性
首先我们来理解JavaScript对象是什么?在Javascript中,万物皆对象。其中创建自定义对象的最简单的方式就是创建一个Object的实例,如下:

var person = new Object();
person.age = 29;

// 对象字面量的形式:
var person = {
     age: 29
};

ECMAScript中有两种属性:数据属性和访问器属性。


数据属性:

其中数据属性有四个描述其行为的特性:
Configurable: 表示能都通过delete删除属性从而重新定义属性。
Enumerable: 表示能否通过for in 循环返回属性。
Writable: 表示能否修改属性的值。
Value: 包含这个属性的数据值。
要修改属性默认的配置,必须使用Object.defineProperty(), 这个方法接收三个参数:属性所在的对象,属性的名字和一个描述性对象。
比如:

var person = {};
Object.defineProperty(persion, ’name’, {
      writable: false,
      value: ’Nicholas'
});

alert(person.name); //Nicholas
person.name = ‘Greg’;
alert(person.name); //Nicholas


访问器属性:
访问器属性包含一对setter和getter函数。包含如下4个特性:
Configurable:能否被delete删除属性重新定义。默认值:true
Enumerable:能否被for-in枚举。默认值:true
Get:读取属性值。默认值:undefined
Set:写入属性值。默认值:undefined

var dog = {
    _age: 2,
    weight: 10
}

Object.defineProperty(dog, 'age', {
    get: function () {
        return this._age
    },
    set: function (newVal) {
        this._age = newVal
        this.weight += 1
    }
})

知道了对象的属性,那么我们创建对象的方式是什么呢?


二、创建对象的方式

创建对象的方式通常有下面几种方式:
1、工厂模式
我们举个例子:

function createPerson(name, age, job) {
    var o = new object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function () {
        alert(this.name);
   };
   Return o;
}

var person = createPerson(‘Greg’, 27, ‘Doctor’);

工厂模式虽然解决了创建多个相似对象的问题,但却没有解决问题识别的问题(即怎样知道一个对象的类型)


2、构造函数模式
我们举个例子:

**function Person(name, age, job) {

this.name = name;
this.age = age;
this.job = job;
this.sayName =  function () {
    alert(this.name);
};
}
var person = new Person(‘Greg’, 27, ‘Doctor’);**

构造函数始终都应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。这里要提的一个属性是constructor, 每个new 出来的实例都有一个constructor(构造函数)属性,该属性指向构造函数。
对象的Constructor属性最初是用来标识对象类型的。但是,提到检测对象类型,还是instanceof操作符更好可靠一些。

alert(person1 instanceof object); //true

构造函数的问题问题就是,每个方法都要在每个实例上重新创建一遍,当然,可以把函数定义转移到构造函数外部来解决这个问题,如下实例:

**function Person(name, age, job) {

this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName() {

alert(this.name);
}
var person = new Person(‘Greg’, 27, ‘Doctor’);**

那么这里的问题就是:在全局作用域中定义的函数实际上被只能被某个对象调用,这让全局作用域有点名不副实。而更让人无法接受的是:如果独享需要定义很多方法,那么就要定义很多个全局函数。下面我们来看看原型模式是不能解决这个问题。


3、原型模式
prototype就是通过调用构造函数而创建的那个对象实例的原型对象。我们来看下面一个例子来理解这句话:

function Person() {
}
Person.prototype.name = “Nicholas”;
Person.prototype.age = 29;
Person.prototype.job = “Software Engineer”;
Person.prototype.sayName = function() {
    alert(this.name);
};
var person1 = new Person();
person1.sayName(); // “Nicholas”

与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。
针对这个特性,我们要注意的几个点就是。
第一,如果实例的属性与方法与原型的属性和方法同名,那谁的优先级高呢?
当然是创建出来的实例的属性和方法的优先级高。
第二,实例的属性与方法的修改会影响原型同名的属性和方法吗?
不会
这里提一下hasOwnProperty(), 使用hasOwnProperty()方法可以检测一个属性是存在于实例中,还是存在原型中。
第三,如何判断某个属性是存在原型中?

function hasPrototypeProperty(object, name) {
    return !Object.hasOwnProperty(name) && (name in object);
}

hasOwnProperty()只在属性存在于实例中才返回true, 因此只要in操作符返回true而hasOwnProperty()返回false, 就可以确定属性是原型中的属性、这里说下Constructor, 每创建一个函数,就会同时创建它的Prototype对象,这个对象也会自动获得Constructor属性。
我们来看一个例子:

function Person() {

}

Person.prototype = {
    constructor: Person,
    name: “Nichloas”,
    age: 29,
    job: “Software Engineer”,
    sayName: function () {
         alert(this.name);
    }  
};

以上代码特意包含了一个Constructor属性,并将它的值设置为Person, 从而确保了通过该属性能够访问到适当的值。但是,以这种方式重设Constructor属性会导致它的Enumerable特性被设置为true, 默认情况下原生的Constructor属性是不可枚举的。

Object.defineProperty(Person.prototype, “Constructor”, {
    enumerable: false,
    value: Person
});

原型对象的问题:
首先,它省略了为构造函数传递初始化参数这一环节。
然后,原型中所有属性是被很多实例共享的,对于包含引用类型值的属性来说,问题比较突出。所以,使用最多的方式使用构造函数和原型模式

4、组合使用构造函数模式和原型模式

function Person(name, age, job) {
     this.name = name;
     this.age = age;
     this.job = job;
     this.friends = [“Shelby”, “Court”];
} 

Person.prototype = {
     constructor: Person,
     sayName: function () {
          alert(this.name);
     }
};

var person = new Person(‘Greg’, 27, ‘Doctor’);

知道了创建对象的方式,那么在Javascript中我们如何来继承对象呢?


三、继承
1、原型链
构造函数,原型和实例的关系:每一个构造函数都也有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?显然,此时的原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含也包含着一个指向一个构造函数的指针,假如另一个原型又是另一个类型的实例,那么上诉关系依然成立,我们来看下面一个例子.

function SuperType() {
    this.property = true;
}

SuerType.prototype.getSuperValue = function () {
     return this.property;
};

function SubType() {
    This.subProperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function () {
    return this.subProperty();
};

var instance = new SubType();
alert(instance.getSuperValue); // true
这个例子中,SubType继承了SuperType,而SuperType继承了Object。如果要确定原型和实例的关系,可以用instanceOf操作符与isPropertyOF()方法。
如 instance instanceOf object; // true
Object.prototype isPropertype(instance); // true

但是通过原型链实现继承时,不能使用对象字面量创建原型方法。

function SuperType() {
    this.property = true;
}

SuerType.prototype.getSuperValue = function () {
     return this.property;
};

function SubType() {
    This.subProperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

// 使用字面量添加新方法,会导致上一行代码无效
SubType.prototype = {
      getSubValue: function () {
            return this.subproperty;
       },
      someOtherMethod: function () {
            return false;
      }
};

var instance = new SubType();
alert(instance.getSuperValue); // error

接下来,我们来说下原型链继承的问题:
第一,最主要的问题来自包含引用类型值的原型。包含引用类型值的原型属性会被所有实例共享,而这也正是为什么要在构造函数中,而不是在原型对象中定义属性的原因。
第二,在创建子类型的实例时候,不能向超类型的构造函数中传递参数。


2、借用构造函数

function SuperType(name) {
       this.name = name;
}

function SubType() {
    // 继承了SuperType, 同时还传递了参数
    SuperType.call(this, “Nicholas”);
    this.age = 29;
}

var instance = new SubType();
alert(instance.name);  // “Nicholas” 

借用构造函数的问题,方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对于子类型而言也是不可见的,结果所有类型都只能使用构造函数模式,考虑到这些问题,借用构造函数的技术也是很少单独使用的。


3、组合继承
组合继承,指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和放大的绩效,而通过借用构造函数来实现对实例属性的继承。

function SuperType(name) {
    this.name = name;
    this.colors = [“red”, “blue”, “green"]
} 

SuperType.prototype.sayName = function () {
     alert[this.name];
};

function SubType(name, age) {
     // 继承属性
     SuperType.call(this, name);
     this.age = age;
} 

// 继承方法
SubType.prototype = new SuperType();

SubType.prototype.sayAge = function () {
    alert(this.age);
};


var instance = new SubType(“Nicholas”, 29);
instance.colors.push(“black”);
alert(instance.colors); // red, blue, green, black

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,成为Javascript中最常见的继承模式。


4、原型式继承

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
]

var person = {
    Name: “Nicholas”,
    friends: [“Shelby”, “Court”, “Van"]
};

var anotherPerson = object(person);
anotherPerson.name = “Greg”;

ECMAScipt5通过新增Object.create()方法规范化了原型式继承。
接着上面的例子:

 var anotherPerson = Object.create(person);
anotherPerson.name = “Greg”;


5、寄生式继承
寄生式继承是与原型式继承紧密相关的一种思路,它与工厂模式类似,即创建一个仅用于封装过程的函数,该函数在内部以某种方法来增强对象,最后再像真地是它做了所有工作一样返回对象。
例如:

function createAnother(original) {
     var clone = object(original);
     clone.sayHi = function () {
           alert(‘hi’);
     };
     return clone; 
}

var person = {
    name: ’Nochplas’,
    friends: [’Shelby’, ‘Court’, ‘Van']
};

var anotherPerson = createAnother(person);


6、组合寄生式继承  

组合继承是Javascript最常用的继承模式,不过,组合继承最大的问题就是无论什么情况下,都会调用两次超类型构建函数:一次是在创建子类型原型的时候,另一次死在子类型构造函数内部。

function SuperType(name) {
    this.name = name;
    this.colors = [“red”, “blue”, “green"]
} 

SuperType.prototype.sayName = function () {
     alert[this.name];
};

function SubType(name, age) {. 
     // 继承属性
     SuperType.call(this, name);   // 第二次调用 SuperType()
     this.age = age;
} 

// 继承方法
SubType.prototype = new SuperType(); // 第一次调用 SuperType()

SubType.prototype.sayAge = function () {
    alert(this.age);
};

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。不必为了制定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果制定给子类型的原型。如下:

function inheritPrototype (subType, superType) {
   var prototype = object (superType.prototype); // 前面的原型式继承object方法
   prototype.constructor = subtype;
   subtype.prototype = prototype;
}


function SuperType(name) {
    this.name = name;
    this.colors = [“red”, “blue”, “green"]
} 

SuperType.prototype.sayName = function () {
     alert[this.name];
};

function SubType(name, age) {. 
     // 继承属性
     SuperType.call(this, name);  
     this.age = age;
} 

inheritPrototype(Subtype, SuperType);

SubType.prototype.sayAge = function () {
    alert(this.age);
};


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2641

关闭

纯CSS Material Design风格按钮

其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓。

设计师该不该学Web前端?_究竟需不需要了解HTML和CSS

先说说大家平时最苦恼的设计稿还原度问题,一个视觉超赞的稿子,怎么到了前端手里,字体边距就乱七八糟呢?为什么没对齐,为什么没加粗,还有说好的动效怎么都没上,完全不是情感化设计了啊。

UED与UCD_用户体验设计/设计思考模式

User Experience Design(用户体验设计),简称UED。UED是以用户为中心的一种设计手段,以用户需求为目标而进行的设计。以用户为中心的设计, 英文叫做User-Centered Design 缩写为UCD,他是UED的一种具体的设计实现理念。

解密 Design System

设计系统的产生是为了某领域内产品在不同平台和设备上都保持设计和交互风格的统一。既然是一个系统 ,那必须具有相应的完整性,它为产品设计,产品内容等方面提供相应的指导

Pichai 谈 Google 的设计发展

让技术为全世界的每一个人服务,这是我的激情所在。不仅是 Google,众多小团队和开发者同样可以设计出优秀的产品并帮助人们解决问题;这是我们的共同目标。

新手Web设计师应该避免的 6 宗罪

新手Web设计师和开发人员往往以有缺陷的创作而告终,却不知道真正的故障出自于哪里。虽说有这么多的设计书籍,但即使都读了,也不会对最后的设计有任何意义。在第一个原型中创建一个无缝的设计真的是一个挑战——事实上,只是做好单个部分就是一个难点。

优秀网页设计_优秀Web设计的69条设计原则

好的设计能够帮助企业提升数据,同时还可以提供用户一个良好的使用体验。不过今天讨论的重点并不是付费报告,而是这69条设计原则。

前端程序员要懂的 UI 设计知识

在本文中,我们介绍了七个主要的设计基础:留白,颜色,对比,比例,对齐方式,版式和视觉层次。它们对于 UI 都同样重要——如果缺少这些元素中的任何一个,都会损害整个用户体验。

专业Web设计师应该避免的6个关键错误

互联网的诞生彻底改变了世界。以前习惯于在电视和报纸广告上一掷千金的企业开始渐渐意识到互联网带来的变化。他们不得不改变他们的投资方向,把他们的钱投向更有潜力,更能为客户带来利润的地方

网页设计需要学那些东西?

初次接触或者想要进入网页设计行业的朋友会经常分不清楚web前端与网页设计之间的区别,不知道网页设计要学什么,web前端要学什么,因此感到很迷茫?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!