JS原型链的理解

《JavaScript高级程序设计》是一本好书,下面总结一下书中关于原型链的讲解。

本文从对象的创建开始,逐渐引出原型链的背景、作用以及ECMA对原型链的定义
1、理解对象
两种常用的创建对象的方法之一是new一个Object对象,并为它添加属性和事件
var person = new Object();
person.name = "wzk";
person.age = 24;
person.sayName = function(){
  alert(this.name);
};

另一种是使用对象字面量创建对象
var person = {
  name : "wzk",
  age : 24;
  sayName : function(){
    alert(this.name);
  }
}

以类似键值对的形式给出每个变量或者函数的定义,注意以逗号分隔,最后一个属性不需要加逗号
两种方法纯粹是写法不同,首推后者。
以上两种方法适合创建单个对象,创建多个对象将造成代码重复。

2、用接口创建对象
2.1、工厂模式
function createPerson(name ,age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function(){
    alert(this.name);
  }
  return 0;
}

var person1("wzk",24);
var person2("cxl","18");

实际上就是上述第一种方法套在函数中的写法
缺点是无法利用instanceof函数识别创建出来的对象

2.2、构造函数模式(惯例首字母大写,与普通函数区别开)
function Person(name,age){
  this.name = name;
  this.age = age;
  this.sayName = function(){
    alert(this.name);
  }
}
var person1 = new Person("wzk",24);
var person2 = new Person("cxl",18);

与工厂模式的区别:
1、没有创建Object对象
2、属性方法直接赋给了this对象
3、没有return

实际上,上述函数看起来就像一个普通函数,this在浏览器中就是指window对象
但是使用new创建,就区别于普通函数,成为构造函数
所以,所有构建对象的动作都是由new做的,动作如下:
1、创建一个新对象
2、将构造函数的作用域赋给创建的新对象,即this指向该新对象
3、为新对象添加属性、方法
4、返回这个新对象

可以使用instanceof判断对象类型
alert(person1 instanceof Person); //true
alert(person2 instanceof Person); //true

构造函数的缺点:
由于ECMAScript中,函数是对象
所以实例person1与person2中的sayName()方法是两个
不同的对象,他们被重复创建,而功能却是一样的。

解决办法:
将sayName()函数移到构造函数外,使构造函数内的sayName函数
指向构造函数外的函数,但带来的新问题:
1、只能被特定对象调用
2、封装性被破坏
下面,终于引出了原型模式解决该问题

原型模式:
函数即对象,在我们创建每一个函数时,每个函数都会自动生成
一个prototype(原型)属性。prototype属性指向一个对象,
该函数的所有实例可以共享该对象的属性和方法。
构造函数也是函数,所以由构造函数生成的每一个对象实例都可以通过
prototype访问这个对象的属性和方法。
prototype指向的这个对象即为该函数的原型对象。
function Person(){
}
Person.prototype.name = "wzk";
Person.prototype.age = 24;
Person.prototype.sayName = function(){
alert(this.name);
}

var person1 = new Person();
var person2 = new Person();
person1.sayName(); //wzk
person2.sayName(); //wzk
alert(person1.sayName == person2.sayName); //true

原型对象:
当创建函数的时候,就会为该函数创建一个prototype属性
,该属性指向函数的原型对象。同时圆形对象会获得一个
constructor(构造函数)属性,指回函数。
即Person.prototype = 原型对象
Person.prototype.constructor = Person

时间: 2024-10-27 03:14:36

JS原型链的理解的相关文章

JS原型链的理解和使用(二)

根据在创建对象的时候,创建出来的对象的__proto__指向创建这个对象的函数的prototype属性. 由于在调用对象的属性或者方法的时候会首先在对象的作用域中查找指定的属性或者方法,如果未找到则会去对象的原型链(即__proto__对象)上查找.所以可以在自定义函数的时候往函数的prototype属性对象上面添加自己的属性和方法(一般是添加方法),然后在用这个函数生成对象的时候则生成的对象就可以直接访问这些添加在函数的prototype上的属性和方法. 如JS内置的Date函数,在我们使用v

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

深入理解JS原型链与继承

我 觉得阅读精彩的文章是提升自己最快的方法,而且我发现人在不同阶段看待同样的东西都会有不同的收获,有一天你看到一本好书或者好的文章,请记得收藏起来, 隔断时间再去看看,我想应该会有很大的收获.其实今天要讨论的主题,有许多人写过许多精彩的文章,但是今天我还是想把自己的理解的知识记录下来.我在学习 掌握JS原型链和继承的时候,就是看得@阮一峰老师的写的文章,觉得他写的技术类的文章都容易让理解,简明概要,又好理解.他是我学习JS路程里面一个比较佩服的导师,昨天重新看了他写的<Javascript 面向

JS 原型链图形详解

JS原型链 这篇文章是「深入ECMA-262-3」系列的一个概览和摘要.每个部分都包含了对应章节的链接,所以你可以阅读它们以便对其有更深的理解. 对象 ECMAScript做为一个高度抽象的面向对象语言,是通过对象来交互的.即使ECMAScript里边也有基本类型,但是,当需要的时候,它们也会被转换成对象. 一个对象就是一个属性集合,并拥有一个独立的prototype(原型)对象.这个prototype可以是一个对象或者null.* 让我们看一个关于对象的基本例子.一个对象的prototype是

js 原型链和继承(转)

在理解继承之前,需要知道 js 的三个东西: 什么是 JS 原型链 this 的值到底是什么 JS 的 new 到底是干什么的 1. 什么是 JS 原型链? 我们知道 JS 有对象,比如 var obj = { name: "obj" }; 我们通过控制台把 obj 打印出来: 我们会发现 obj 已经有几个属性(方法)了.那么问题来了:valueOf / toString / constructor 是怎么来?我们并没有给 obj.valueOf 赋值呀. 上面这个图有点难懂,我手画

对原型链的理解 语言表达能力不好 直接用代码,哈

分享一下 我对原型和原型链的理解 原型对象: function People(nameValue,ageValue,fondValue)            {                this.name = nameValue;                this.age = ageValue;                this.fond = fondValue;            } People.prototype.rule = function()         

js原型链与继承(初体验)

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

浅谈js原型链与继承

js原型链与继承是js中的重点,所以我们通过以下三个例子来进行详细的讲解. 首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享

原型链的理解

### 原型链的理解 #### 概念 + javascript每一个对象**包括原型对象**都有一个内置的`proto`属性指向创建他的函数对象的原型对象,即`prototype`属性 #### 作用 + 实现对象的继承 ### 理解 1.函数对象 + 在javascript中,函数就是对象 2.原型对象 + 当定义一个函数对象的时候,会包含一个预定的属性,`prototype`,这就属性称之为原型对象 3.\__proto__ + javascript 在创建对象的时候,都会有一个\_prot