菜鸟快飞之JavaScript对象、原型、继承(二)

  上一节写了创建对象的三种方法,而其中通过函数创建对象的方式又有三种模式,分别是工厂模式、构造函数模式、原型模式。而这三种模式最常用的则是原型模式。还是上栗子:

  工厂模式:

function Fun1(name,age){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.sayNmae = function(){
        return this.name;
    };
    return obj;
}

var p1 = Fun1(‘xiaohong‘, 22);
var p2 = Fun1(‘xiaoming‘, 25);

p1 instanceof Fun1; // false

  工厂模式的缺点在于无法进行对象识别,就是知道一个对象的类型。(ps:其实我也没太搞明白这个用处,写的代码太少)

构造函数模式:

function Person(name,age) {
 this.name = name;
 this.age = age;
 this.sayName = function() {
  console.log(‘你好,我叫:‘ + this.name);
 };
}

var p1 = new Person(‘小明‘, 25);
var p2 = new Person(‘小花‘, 23);

p1 instanceof Person; // true

  使用构造函数模式创建对象,需要使用new操作符来创建实例,通过这种方式调用构造函数会经历以下4个过程:

    1.创建一个新对象

    2.将构造函数的作用域赋给新对象,从而使this指向新对象

    3.执行构造函数中的代码

    4.返回新对象

  现在可以使用instanceof来检测对象类型了。

  不过单纯的通过构造函数来创建对象也是有缺点的,缺点就是重复创建实例,比如上面代码中的sayName()方法会被创建两次。

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

  因为方法sayName()是可以共享的,所以我们不需要让它多次创建,为了解决这个问题,我们可以把方法sayName()拿出来,放在函数Persorn的外面,但是这样做就体现不出封装性了,所以这个时候需要的就是原型模式了。

  构造函数模式用来定义实例的属性,原型模式用来定义共享的方法和属性。

function Person(name,age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    console.log(‘你好,我叫:‘ + this.name);
};
var p1 = new Person(‘小明‘, 25);
var p2 = new Person(‘小花‘, 23);

p1.sayName(); // 你好,我叫:小明
p2.sayName(); // 你好,我叫:小花 

原型

  prototype与__proto__

  每个函数都有一个prototype(原型)属性,这个属性指向一个对象,用来包含所有实例共享的属性和方法。

  通过构造函数创建一个新实例后,这个实例会有一个指针[[Prototype]],我们可以通过__proto__属性来访问,这个链接存在于实例和构造函数的原型对象之间:Person.prototype === person.__proto__。

  isPrototypeOf(instence)

  isPrototypeOf()方法用来确定实例与构建函数的原型对象的关系。

Person.prototype.isPrototypeOf(p1); // true

  Object.getPrototypeOf(instence)

  Object.getPrototypeOf()返回创建这个实例对象的构建函数的原型对象。

Object.getPrototypeOf(p1) === Person.prototype;  // true

  hasOwnProperty()

  hasOwnProperty()可以用来检测属性是否存在于实例对象中。

  for-in

  for-in循环中,返回实例和原型中所有可以访问,可枚举的属性。

function Person(name,age) {
 this.name = name;
 this.age = age;

}
Person.prototype.sayName = function() {
 console.log(‘你好,我叫:‘ + this.name + ‘。性别:‘ + this.sex);
};
Person.prototype.sex = ‘男‘;
var p1 = new Person(‘小明‘, 25);

p1.sayName();  // 你好,我叫:小明。性别:男 

for(var i in p1){
 if(p1.hasOwnProperty(i)){
  console.log(i);  // name和age
 }
}

  Object.keys()

  Object.keys()返回给定对象上所有可枚举的实例属性。

Object.keys(Person.prototype);  // ["sayName", "sex"]

  Object.getOwnPropertyNames()

  Object.getOwnPropertyNames()放回给定对象上所有实例属性,包括不可枚举的实例属性。

Object.getOwnPropertyNames(Person.prototype);  // ["constructor", "sayName", "sex"]
时间: 2024-08-11 05:43:09

菜鸟快飞之JavaScript对象、原型、继承(二)的相关文章

菜鸟快飞之JavaScript对象、原型、继承(三)

正文之前需要声明的一点是,菜鸟系列博文全是基于ES5的,不考虑ES6甚至更高版本. 继承 由于我个人不是学计算机的,所以对于很多东西只是知其然,不知其所以然.就像这个继承,刚开始学JavaScript就听人说了JavaScript几大核心,但是自己平时似乎都没怎么用到,所以一直不明白为什么需要这些东西,面试还总是问这些. 但是随着一点点学习,也有去看过jQuery源码,虽然到现在也没怎么看懂(主要也是有些懒),但慢慢还是对这些东西有了更深的了解. 为什么需要继承 举个很简单的例子,我在平时学习写

关于js的对象原型继承(二)

本章讨论使用new一个构造函数来创建一个对象. 前期知识点说明: 1.prototype是函数的一个属性,每个函数都有一个prototype属性.这个属性是一个指针,指向一个对象.它是显示修改对象的原型的属性. 2.__proto__是一个对象拥有的内置属性(请注意:prototype是函数的内置属性,__proto__是对象的内置属性),是JS内部使用寻找原型链的属性. 首先上代码: //构造函数 function Cat(name) { this.name=name||'某只猫'; this

关于js的对象原型继承

javascript中,对象的继承是通过原型去继承. 可以这样理解:js中的对象,包含的除了属性和方法,还有一个最基本的原型__proto__对象.这个原型__proto__指向谁,这个对象就继承谁.这是最容易理解对象原型继承的一种方式. 如下面的代码: var student={ name:'zhangsan', age:21, run:function(){ return this.name+' is running!'; } }; var xiaoming={ name:'xiaoming

JavaScript的原型继承

JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么? 原型我们可以参照C++里的类,同样的保存了对象的属性和方法.例如我们写一个简单的对象 function Animal(name) { t

JavaScript对象 原型

javascript对象就是一组数据和功能的集合,除原始类型(string.number.boolean.null.undefined)之外,其余都是对象. 可以通过对象直接量(字面量).new.和Object.create()(ECMAScript5)来创建对象. //new var person = new Object(); person.name = "YuanSong"; person.age = 28; //对象字面量 var person = { name : "

JavaScript大杂烩4 - 理解JavaScript对象的继承机制

面向对象之继承 JavaScript是单根的面向对象语言,它只有单一的根Object,所有的其他对象都是直接或者间接的从Object对象继承(没有指定父类的对象,都被认为是从Object继承的). 在前面我们讨论了面向对象的封装性,在最后的地方也谈到了JavaScript的继承是通过原型和原型链实现的,下面我们就详细的展开这个问题:JavaScript到底是如何实现继承的? 继承的本质 继承的本质是重用,从语法上来讲,继承就是"D是B"的描述,其中B是基类,描述共性,D是子类,描述特性

node.js javascript理解原型继承

util.inherits util.inherits(constructor, superConstructor)是一个实现对象间原型继承的函数. JavaScript 的面向对象特性是基于原型的,与常见的基于类的不同.JavaScript 没有提供对象继承的语言级别特性,而是通过原型复制来实现的 var util = require('util'); function Base() { this.name = 'base'; this.base = 1991; this.sayHello =

JavaScript对象 创建对象 继承

创建对象  --以下内容来自JavaScript高级程序设计 工厂模式 用函数来封装以特定接口创建对象的细节. 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 person1 = createPerson("Nichola

Javascript对象的继承

对象的继承 Javascript主要通过原型链实现继承,原型链的构建是通过将一个类型的实例赋值给另一个构造函数的原型实现的. 由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样.这就是Javascript继承机制的设计思想. 继承方法: (1)原型链继承方法:基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法.继承是通过创建超类型的实例,并将该实例赋给子类型