Javascript之创建对象(原型模式)
我们创建的每个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,它的用途是包含可以有特定类型的所有实例共享的属性和方法。
prototype就是通过构造函数而创建的那个对象的原型对象。使用原型的好处就是可以让所有对象实例共享它所包含的属性和方法 。
function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.prototype.sayName = function () {alert(this.name); } var person1 = new Person(); person1.sayName(); //zxj var person2 = new Person(); person2.sayName(); //zxj
1、理解原型对象
alert(Person.prorotype.isPrototypeOf(person1)); //true alert(Person.prorotype.isPrototypeOf(person2)); //true
function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person(); person1.name = "Greg"; alert(person1.name); //Greg 来自实例 alert(person2.name); //zxj 来自原型 delete person1.name; //删除实例中的name属性 alert(person1.name); //zxj 来自原型
使用hasOwnPeoperty()方法可以检测一个属性是否存在于实例中,还是存在原型中,这个方法(它是从Object继承来的)只在给定属性存在域对象实例中时,才返回true。
function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person(); alert(person1.hasOwnProperty("name")); //false person1.name = "Greg"; alert(person1.name); //Greg 来自实例 alert(person1.hasOwnProperty("name")); //true alert(person2.name); //zxj 来自原型 alert(person2.hasOwnProperty("name")); //false delete person1.name; alert(person1.name); //zxj 来自原型 alert(person1.hasOwnProperty("name")); //false
2、原型与in操作符
function Person() { } Person.prototype.name = "zxj"; Person.prototype.age = 29; Person.prototype.job = "Software Engineer"; Person.sayName = function () {alert(this.name); } var person1 = new Person(); var person2 = new Person();alert(person1.hasOwnProperty("name")); //false alert("name" in person1); //true person1.name = "Greg";alert(person1.name); //Greg 来自实例 alert(person1.hasOwnProperty("name")); //true alert("name" in person1); //true alert(person2.name); //zxj 来自原型 alert(person2.hasOwnProperty("name")); //false alert("name" in person2); //truedelete person1.name; alert(person1.name); //zxj 来自原型 alert(person1.hasOwnProperty("name")); //false alert("name" in person1); //true alert(person1.hasOwnProperty("qqqq")); //false alert("qqqq" in person1); //false
var o = {toString: function () {return "My Object";} } for (var prop in o) {if (prop == "toString") {alert("Found toString"); //在IE中不会显示(IE9(未测试)和IE10(已测试)可用) } }
3、更简单的原型语法
function Person(){ }Person.peototype={name:"zxj",age:29,job:"Software Engineer",sayName:function(){alert(this.name);} };
function Person() { }Person.prototype = {constructor: Person,name: "zxj",age: 29,sayName: function () {alert(this.name);} };
function Person() { }Person.prototype = {constructor: Person,name: "zxj",age: 29,sayName: function () {alert(this.name);} };Object.defineProperty(Person.prototype,"constructor",{enumerable:false,value:Person });
4、原型的动态性
function Person() { }var friend = new Person();Person.prototype.sayHi = function () {alert("hi"); }friend.sayHi(); //"hi"
function Person() { }var friend = new Person();Person.prototype = {constructor: Person,name: "zxj",age: 29,job: "Software Engineer",sayName: function () {alert(this.name);} };friend.sayName(); //error 找不到该方法
5、原生对象的原型
alert(typeof Array.prototype.sort); //"function" alert(typeof String.prototype.substring); //"function"
String.prototype.startWith = function (text) {return this.indexOf(text) == 0; }var msg = "Hello World";alert(msg.startWith("Hello")); //true
6、原型对象的问题
Person.prototype = {constructor: Person,name: "zxj",age: 29,job: "Software Engineer",friends: ["saly", "geil"],sayName: function () {alert(this.name);} };var person1 = new Person(); var person2 = new Person();person1.friends.push("van");alert(person1.friends); //"saly","geil","van" alert(person2.friends); //"saly","geil","van" alert(person1.friends === person2.friends) //问题出来了,person1结交了新朋友意味着person2也必须结交这个朋友
转载于:https://www.cnblogs.com/zxj159/archive/2013/05/20/3089513.html
Javascript之创建对象(原型模式)相关推荐
- JavaScript为什么使用原型模式而不是类模式
导言: 作为JavaScript初学者的本菜鸡而言,刚一开始接触这门语言我就被他的原型模式给吓到了.并且在相当长的一段时间之内,我都完全不能理解或者不能接受这个模式.直到最近经过多方调查和思考才有所明 ...
- JavaScript之创建对象的模式
使用Object的构造函数可以创建对象或者使用对象字面量来创建单个对象,但是这些方法有一个明显的缺点:使用相同的一个接口创建很多对象,会产生大量的重复代码. (一)工厂模式 这种模式抽象了创建具体对象 ...
- 设计模式(7)[JS版]-JavaScript设计模式之原型模式如何实现???
目录 1.什么是原型模式 2 参与者 3 实例讲解 4 使用 Object.create实现原型模式 4.1 Object.create()的用法 4.2 用 Object.create实现继承 4. ...
- JavaScript 面向对象 (prototype 原型模式)
一. JavaScript 设计思想 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.这是历史上第一个比较成熟的网络浏览器,轰动一时.但是,这个版本的浏览器只能用来浏览 ...
- JavaScript --- [学习笔记] 原型模式
说明 接JavaScript - > [学习笔记]观察者模式 & 理解对象 & 工厂模式 & 构造函数模式 上一篇构造函数模式创建的实例,不同实例的同一个方法是不相等的, ...
- js创建对象之原型模式2原型与in操作符
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
- [转]JavaScript构造函数及原型对象
JavaScript中没有类的概念,所以其在对象创建方面与面向对象语言有所不同. JS中对象可以定义为"无序属性的集合".其属性可以包含基本值,对象以及函数.对象实质上就是一组没有 ...
- 设计模式 6 - 原型模式及spring源码案例分析
目录 原型模式 1. 原型模式的引入 2. 原型模式的介绍和使用场景 3. 原理结构图UML图 4. 代码演示 5. 原型模式在spring中的使用 6.深拷贝的实现方式 7. 小结 原型模式 博主一 ...
- javascript中原型模式创建对象特点分析
在javascript中,我们创建的每个函数都有一个prototype(原型)属性.这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.使用原型对象的好处 ...
- JavaScript:创建对象(原型模式和构造函数模式)
JavaScript:对象 一.理解对象 var person = {}Object.defineProperty(person,'name',{writable:false,value : 'Nik ...
最新文章
- Matlab数据的可视化 -- 柱形立体图
- s2sh乱码一个小处理(新手按流程走)
- LeetCode 1985. 找出数组中的第 K 大整数(排序)
- android support library github,Android Support Library 之 夜间模式
- java 素数乘积,求助2424379123 = 两个素数的乘积,求这两个素数?
- 团队工作室展示官网源码带后台-源团V1.0版本
- java求圆弧切线_两个圆的公切线
- SpringMVC 全局异常处理的简单应用
- 【BZOJ1057】【codevs1428】棋盘制作,悬线法
- 4chan 爬虫_类似4chan网站
- python中none算变量吗_在python中对变量判断是否为None的三种方法总结
- Subtext--为skin准备相关文件加载
- Docker镜像构建
- Atitit attilax总结的对于attilax重要的jsr规范,以及需要增加的jsr规范
- V5-SP6:iocomp-32/iocomp-64-crack-免安装
- 百度wz竞价开户推广营销的四大好处
- OpenERP-指定动作视图
- SSH连接时候出现 REMOTE HOST IDENTIFICATION HAS CHANGED
- 微信小程序 | 基于ChatGPT实现电影推荐小程序
- Crossplane 和 Terraform 的区别
热门文章
- mysql中的replication_mysql中replication的相关问题总结
- radmin提示授权码过期_IdentityServer4 客户端授权模式(Client Credentials)
- elupload获取文件名与路径_Uipath获取文件名,路径,扩展名等操作
- Eigen(7)Map类
- CentOS 6.4安装pip,CentOS安装python包管理安装工具pip的方法
- C++读取文本文件中以TAB作为分隔符,且中间字段有为空的情况的方法?
- c语言定时器作用,Go语言定时器实现原理及作用
- 新生必会的linux命令,jstat命令详解
- AUTOSAR从入门到精通100讲(十一)-AUTOSAR NVM基础知识
- sql server2008如何修改mac地址_如何查看本机的MAC地址和IP地址?