js面向对象实现方式的演变及常用方法

面向对象三大特性:封装,继承,多态。

1.原始模式

var obj = new Object();  obj.name = name; obj.sex = sex;

obj.showName = function(){

alert("我的名字叫"+this.name)

}

obj.showSex ......

var Cat = {}   也可以用json的方式创建   原理相同

2.工厂模式

容易理解版

function createPerson(name,sex){

// 原料

var obj = new Object();

//加工

obj.name = name;

obj.sex = sex;

obj.showName= function(){

alert(‘我的名字叫‘+this.name);

}

//出厂

}

json版

function Cat(name,color){

return {

name: name,

color: color,

showNamr: function(){

alert(‘我的名字叫‘+this.name);

}

}

}

缺点:没有new,创建多个副本,代码不够简洁

3.构造函数模式

function Cat(name,color){

this.name = name;

this.color = color;

}

var cat1   = new Cat("大象","黄毛");

new的作用:1.系统自动创建一个对象 2.将内部的this指向这个创建的对象 3.返回这个对象

缺点:依旧创建多个副本浪费内存资源

4.原型模式(混合法)

function Cat(name,colot){

     this.name = name;

this.color = color;

}

Cat.prototype.type = " 猫科动物";

Cat.prototype.eat = function(){

alert("吃老鼠");

}

问题注意

alert(cat1.eat == cat2.eat); //true

type和eat就指向同一块内存区域了

Cat即是类也是构造函数在js里是部分家的

构造函数首字母大写

原型上方法属性和实例行间赋予的方法属性  行间优先级较高会替换原型上的方法属性

5.面向对象常用到的方法

prototype 属性使您有能力向对象添加属性和方法(也就就是java中的类的方法)

constructor: 返回此对象创造它的函数的引用(构造函数)

instanceof: 判断对象是不是 一个构造函数的实例

isPrototypeOf() 判断prototype对象和实例之间的关系

Cat.prototype.isPrototypeOf(cat1);

hasOwnProperty() 判断属性是行间本地属性还是 集成prototype

cat1.hasOwnProperty(‘name‘)属于自己返回true

in 判断是否包含某个属性 不管是本地还是原型上

“name” in cat1

in 用来遍历所有属性

时间: 2024-07-28 23:03:42

js面向对象实现方式的演变及常用方法的相关文章

第163天:js面向对象-对象创建方式总结

面向对象-对象创建方式总结 1. 创建对象的方式,json方式 推荐使用的场合: 作为函数的参数,临时只用一次的场景.比如设置函数原型对象. 1 var obj = {}; 2 //对象有自己的 属性 和 行为 3 // 属性比如: 年龄.姓名.性别 4 // 行为: 吃饭.睡觉.走路.讲课等... 动作 5 var obj2 = { 6 name: 'laoma', 7 age: 18, 8 sayHi: function(){ 9 console.log( name + 'say hi' )

以最简单的登录为例,诠释JS面向对象的简单实例

JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这个框架十分流行,不论是刚入坑的开发者还是老油条,其实也都是是需要会的 BackBone:这个技术还不错,曾经的项目中用到过多次,很方便,是个MVC的实用框架,用来渲染视图十分简便 AngularJS:是个MVVM框架,和JQuery完全不一样,JQuery是基于dom元素的,而angerlar却不是

浅谈JS面向对象之创建对象

hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言是很大的意义. 首先什么是面向对象编程(oop),就是用对象的思想去写代码,那什么是对象呢,其实我们一直在用,像数组 Array  时间 Date 都是对象,并且这些对象是系统创建的,所以叫系统对象,而我们自己当然也可以创建对象,一般对象有两部分组成: 1 方法 (动态的 对象下面的函数)比如Array 的push(),sort()方法 2  属性 (静态的,相

js面向对象

前言 当今 JavaScript 大行其道,各种应用对其依赖日深.web 程序员已逐渐习惯使用各种优秀的 JavaScript 框架快速开发 Web 应用,从而忽略了对原生 JavaScript 的学习和深入理解.所以,经常出现的情况是,很多做了多年 JS 开发的程序员对闭包.函数式编程.原型总是说不清道不明,即使使用了框架,其代码组织也非常糟糕.这都是对原生 JavaScript 语言特性理解不够的表现.要掌握好 JavaScript,首先一点是必须摒弃一些其他高级语言如 Java.C# 等类

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

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

js面向对象程序设置——创建对象

<script type="text/javascript">            //工厂方式        //1.原始方式        /* var objCar=new Object();        objCar.name="劳斯莱斯";        objCar.color="blue";        objCar.showColor = function() {          alert(this.colo

js面向对象深入理解

js面向对象深入理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 一.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个Object 对象 box.name = 'Lee'; //创建一个name 属性并赋值 b

js面向对象编程

1.js面向对象之对象 1.1js代码 <script> function hello(){ alert("hi!"); } //使用prototype属性为类添加属性和方法 hello.prototype={ name:"lihua", say:function(){ alert(this.name); } } //测试 function test(){ var people=new hello(); people.say(); alert(peopl

js面向对象编程:this到底代表什么?

在js中this的用法很让人迷惑,有些像Java或者C#中的this,但又不完全一样.按照流行的说法this总是指向调用方法的对象. 1.纯粹函数调用. function ListCommon2(x) { this.x=x; alert("this 是 ListCommon2"+(this instanceof ListCommon2)); alert("this.constructor"+this.constructor); } function test(){