javascript代码实例教程-JS面向对象使用介绍

发布时间:2019-01-01 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS面向对象使用介绍脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

一 对象

ECMAScript变量包含两种不同类型的值:基本类型、引用类型。

基本类型:number stringboolean nullundefined;

引用类型:Object Array DateRegExp Function Math

基本包装类型(Number,String,Boolean);

两种类型的区别是:存储位置不同

基本类型:直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;

引用类型:存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其在栈中的地址,取得地址后从堆中获得实体

对象:无序属性的集合,其属性可以包含基本值或者对象

创建对象-----基于Object对象方式.

VAR box = new Object(); //创建一个Object对象

box.name = ‘Lee’; //创建一个name属性并赋值

box.age = 100; //创建一个age属性并赋值

box.run = function () { //创建一个run()方法并返回值

return this.name +this.age

};

alert(box.run()); //输出属性和方法的值

上面创建了一个对象,并且创建属性和方法,在run()方法里的this,就是代表box对象

本身。这种是JavaScript创建对象最基本的方法,但有个缺点,想创建一个类似的对象,就

会产生大量的代码

创建对象------对象字面量方式:

Var PErson={

name: “张三”,

age : 18,

eat:funtion(){

alert(“对方是否”);

}

}

数据属性和访问器属性---用于JS引擎,外部无法直接访问(内部值)

数据属性的特性:

[[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;

[[enumberable]]:表示是否可以在 for...in 循环和Object.keys()中被枚举。默认true;

[[wrITable]]:表示是否可修改属性的值。默认true;

[[value]]:包含该属性的数据值。读取/写入都是该值。

要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。

varperson = {};

Object.definePRoperty(person,'name', {

configurable:false,

writable:false,

value: 'Jack'

});

访问器属性的特性

[[configurable]]:是否可通过delete操作符删除重新定义属性;

[[enumberable]]:是否可通过for-in循环查找该属性;

[[set]]:写入(设置)属性时调用函数,默认:undefined;一旦属性被访问读取,此方法被自动调用。

[[get]]:读取(获取)属性时调用函数,默认:undefined;一旦属性被重新赋值,此方法被自动调用。

访问器属性不能直接定义,必须使用defineProperty()来定义。

不能同时设置访问器 (get和 set)和wriable或 value,否则会错,就是说想用(get和 set),就不能用(wriable或 value中的任何一个)

ECMA-262(5)还提供了一个Object.defineProperties()方法,可以用来一次性定义多个属性的特性---(ie9)

var person ={};

Object.defineProperties(person,{

_age:{//前面的下划线是一种常用的记号,用于表示只能通过对象方法访问的属性

value:19,

configurable: true,

writable:true

},

isAdult:{

get:function(){

if(this._age>=18){

return true;

}else{

return false;

}

}

}

});

person._age=16;

console.LOG(person._age);

console.log(person.isAdult?"成年":"未成年");

对象封装性:js中面向对象的封装手段主要是通过函数来进行

封装性之工厂模式:原料—>加工—>出厂

function createObject(name, age) { //集中实例化的函数

var obj = newObject();

obj.name = name;

obj.age = age;

obj.run = function (){

return this.name + this.age ;

};

return obj;

}

var box1 = createObject('Lee', 100); //第一个实例

var box2 = createObject('Jack', 200); //第二个实例

alert(box1.run());

alert(box2.run());

工厂模式虽然解决了封装对象的问题,但还有一个问题那就是根本无法搞清楚他们到底是哪个对象的实例。

alert(typeof box1); //Object

alert(box1 instanceof Object); //true

封装性之构造函数模式

ecmascript 中可以采用构造函数可用来创建特定的对象。类似基于Object创建对象。

构造函数模式的语法:

function Box(name, age) {

[this=new Object()]

this.name =name;

this.age = age;

this.run =function () {

returnthis.name + this.age;

};

[return this]

}

var box1 = new Box('Lee', 100);

var box2 = new Box('Jack', 200);

使用工厂模式的方法他们不同之处如下:

1.构造函数方法没有显示的创建对象(new Object());

2.直接将属性和方法赋值给 this 对象;

3.没有 renturn 语句。

构造函数的规范:

1.函数名和实例化构造名相同且大写,(PS:非强制,但这么写有助于区分构造函数和普通函数);

2.通过构造函数创建对象,必须使用 new 运算符。

3.构造函数和普通函数的唯一区别,就是他们调用的方式不同。只不过,构造函数也是函数,必须用 new运算符来调用,否则就是普通函数。

通过构造函数创建和封装对象,那么这个对象是哪里来的?new Object()在什么地方?是怎么执行的?

1.当通过new FunName()调用构造函数时,浏览器的js解析器解析到new操作符时就默认创建了newObject();

2.将构造函数的作用域赋给新对象,(即 new Object()创建出的对象),而函数体内的this就指向新实例化出来的对象。

3.执行构造函数内的代码;

4.返回新对象(浏览器的js解析器直接返回)。

关于this指向的几种情况

1.全局中调用

var box = 2;

alert(this.box); //全局,代表 window

2.函数调用

函数中的this也指向window对象

function greeting(){

this.name="sheila";

alert("hello"+this.name);

}

greeting();//hello sheila

alert(window.name);//sheila

3.对象的方法调用

obj.fn();//obj对象的fn()方法中的this指向obj

4.调用构造函数

var dog=new Dog();//构造函数内的this指向新创建的实例对象

与普通函数相比,构造函数有以下明显特点:

a.用new关键字调用

b.函数内部可以使用this关键字

c.默认不用return返回值

d.函数命名建议首字母大写,与普通函数(驼峰命名法)区分开。

构造函数的缺点:

创建多个实例时,会重复调用new Function()创建多个函数实例,这些函数实例还不是在同一个作用域中,这会造成内存浪费。

functionPerson(name,age,sex){

this.name=name;

this.age=age;

this.sex=sex;

/*this.getInfo=function () {

return this.name+"---"+this.age+"---"+this.sex;

}*/

this.getInfo=newFunction('return this.name+"---"+this.age+"---"+this.sex;')

}

varper1=newPerson('小黑',29,'公的');

varper2=newPerson('小黑',29,'母的');

console.log(per2.getInfo());

console.log(per2.getInfo==per1.getInfo);//false

在构造函数里面创建方法会形成闭包

functionObj() {

this.age=20;

this.fun=function() {

this.age++;

console.log(this.age)

}

}

varnewObj=newObj;

varnewObj1=newObj;

newObj.fun();

newObj.fun();

newObj.fun();

newObj1.fun();

三、call , apply方法实现继承

//Call

function Person(sname,age) {

this.sname =sname;

this.age = age;

}

function Student(sname,age,sex){

Person.call(this,sname,age);

this.sex=sex;

}

var stu=new Student('小方',18,'女');

alert(stu.sname);

//1,第一个参数this都一样,指当前对象

//2,第二个参数不一样:call的是一个个的参数列表;apply的是一个数组(arguments也可以)

call , apply方法的其他使用场景

// 应用场景一

function Fruit(color, Shape) {

this.color = color;

this.shape = shape;

}

Fruit.prototype = {

constructor: Fruit,

getinfo: function () {

console.log(this.color + ',' + this.shape);

}

}

let apple = new Fruit('orange', 'circle');

apple.getinfo();

let banner = {

color: 'yellow',

shape: 'cylinder'

}

apple.getinfo.call(banner);

apple.getinfo.apply(banner);

// 应用场景二

var array1 = [12, "foo", {name:"Joe"},-2458];

var array2 = ["Doe", 555, 100];

Array.prototype.push.apply(array1, array2);

console.log(array1);

Array.prototype.push.call(array1,"Doe", 555, 100);

console.log(array1);

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS面向对象使用介绍全部内容,希望文章能够帮你解决javascript代码实例教程-JS面向对象使用介绍所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。