威尼斯wns.9778官网 > 计算机教程 > JavaScript的面向对象

原标题:JavaScript的面向对象

浏览次数:186 时间:2019-08-30

  给对象添加方法和给变量添加一个属性其实大同小异。具体代码如下:

删除属性

 

 

delete运算符可以删除对象的属性。
delete只是断开属性和宿主对象的联系,而不会去操作属性中的属性,如果删除的属性是个对象,那么这个对象的引用还是存在的。


var
a = {b:{c:1}};

var
b = a.b;

console.log(b.c);// 1

console.log(a.b);// {c:1}

delete
a.b;

console.log(b.c);// 1

console.log(a.b);//undefined

delete只能删除自有属性,不能删除继承属性。

返回值

返回值为true

 

 

 

当delete表达式删除成功或没有任何副作用(比如删除不存在的属性),或者delete后不是一个属性访问表达式,delete会返回 true ;


var
a = {b:{c:1}};

console.log(delete
a.b);

console.log(delete
a.b);

console.log(delete
a.toString);

console.log(delete
1);

 

以上都会打印true

返回值为false

 

 

 

delete不能删除那些可配置性为false的属性,例如某些内置对象的属性是不可配置的,通过变量声明和函数声明创建的全局对象的属性。


var
a = {};

Object.defineProperty(a,'b',{

    value:1,

    configurable:false
// 设置为不可配置

})

console.log(delete
a.b)

console.log(delete
Object.prototype)

var
x = 1;

console.log(delete
this.x);

console.log(delete
x)

 

以上打印都为false

您可能感兴趣的文章:

 

<script>
var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name   " "  user.age);//返回 '念在三角湖畔 湖北武汉'
</script> 

对象方法和属性的汇总

 

Object静态方法

Object的实例方法(定义在Object.prototype上的)

  2.JSON法创建

包装对象

 

 

当使用原始类型的值(string、number、boolean),在调用对应属性和方法的时候,内部会自动转成对应的对象。隐式创建的这个对象,就成为包装对象。
基本类型都有自己对应的包装对象 : String Number Boolean

包装对象的特点
隐式创建对象后,可以调用对应的属性和方法
使用后,立马销毁,所以不能给原始类型的值添加属性和方法

 

 

 

 

 

其过程举例:str.substring – > new String(1234) – > 找到String的substring -> 将new String销毁

如果你想学习前端,可以来这个Q群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

//传统赋值
var user = {};
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name   " "  user.age);//返回 '念在三角湖畔 湖北武汉'

 

面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象。但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同。

点击有惊喜

  1.使用new运算符

面向对象

  3.传统赋值方式

检测属性

 

in 运算符

in 运算符的左侧是属性名(字符串),右侧是对象。如果对象的自有属性或继承属性中包含这个属性则返回true。


var
a = {b:1};

console.log('a'
in window); // true 声明的全局变量'a'是window的属性

console.log('b'
in a); // true 'b'是a的属性

console.log('toString'
in a); // true a继承了toString属性

console.log('c'
in a); // false 'c'不是a的属性

跟in运算符类似的,还可以用”!==”判断一个属性是否是undefined,但是有一种场景只能使用in运算符,in可以区分不存在的属性和存在但值为undefined的属性。


var
a = {b:undefined};

console.log(a.b !== undefined); //false

console.log(a.c !== undefined); //false

console.log('b'
in a); //true

console.log('c'
in a); //false

hasOwnProperty

对象的hasOwnProperty()方法用来检测给定的名字是否是对象的自有属性。对于继承属性它将返回false


var
a = {b:1};

console.log(a.hasOwnProperty('b'));//true

console.log(a.hasOwnProperty('c'));//false

console.log(a.hasOwnProperty('toString'));//false toString是继承属性

propertyIsEnumerable

对象的propertyIsEnumerable()方法只有检测到是自身属性(不包括继承的属性)且这个属性的可枚举性为true时它才返回true。


var
a = {b:1};

console.log(a.propertyIsEnumerable('b'));

console.log(a.propertyIsEnumerable('toString'));

  4.属性的调用

创建对象

 

1、对象直接量

创建对象最简单的方式就是在JavaScript代码中使用对象直接量。


var
book = {

            "main title":'guide'//属性名字里有空格,必须加引号

            "sub-title":'JS'//属性名字里有连字符,必须加引号

            for:'development'//for是关键字,不过从ES5开始,作为属性名关键字和保留字可以不加引号

            author: {

                firstname:'David'//这里的属性名就都没有引号

                surname:'Flanagan'

            }

        }

注意: 从ES5开始,对象直接量中的最后一个属性后的逗号将被忽略。

扩展: [JavaScript中的关键字和保留字]

如果你想学习前端,可以来这个Q群,首先是291,中间是851,最后是189,里面可以学习和交流,也有资料可以下载。

2、通过new创建对象

new 运算符创建并初始化一个新对象。关键字new后跟一个函数调用。这里的函数称做构造函数(constructor),构造函数用以初始化一个新创建的对象。JavaScript中的数据类型都包含内置的构造函数。


var
o = new
Object(); //创建一个空对象,和{}一样。

var
arr = new
Array(); //创建一个空数组,和[]一样。

扩展 1:new

 

 

 

new 是一个一元运算符,专门运算函数的。new后面调用的函数叫做构造函数,构造函数new的过程叫做实例化。
当new去调用一个函数 : 这个时候函数中的this就指向创建出来的对象,而且函数的的返回值直接就是this(隐式返回)
有一个默认惯例就是构造函数的名字首字母大写。

注意:
当return的时候,如果是后面为简单类型,那么返回值还是这个对象;
如果return为对象类型,那么返回的就是return后面的这个对象。

扩展 2:基本类型和对象类型(复杂类型)的区别

 

 

 

赋值:
基本类型 : 赋值的时候只是值的复制
对象类型 : 赋值不仅是值的复制,而且也是引用的传递(可以理解为内存地址)可以理解为赋址。

比较相等
基本类型 : 值相同就可以
对象类型 : 值和引用都相同才行

扩展 3:原型 prototype

 

 

 

每一个JavaScript对象(null除外)都和另一个对象相关联,这个对象就是原型,每一个对象都从原型继承属性。

3、Object.create()

Object.create() 这个方法是ES5定义的,它创建一个新对象,其中第一个参数是这个对象的原型。第二个参数是可选参数,用以对对象属性进行进一步描述。

可以通过传入参数 null 创建一个没有原型的新对象,不过这个新对象不会继承任何东西,甚至不包括基础方法。
var o = Object.create(null); //o不会继承任何属性和方法,空空的。

如果想创建一个普通的空对象,需要传入Object.prototype
var o = Object.create(Object.prototype); //o相当于{}

  6.删除对象的属性

面向对象编程

 

 

通俗点,用对象的思想写代码就是面向对象编程。

基本特征

1、抽象:抓住核心问题(简单理解为抽出像的部分;将相同或表现与问题相关特征的内容提取出来。)
其核心:抽出、抽离,将相同的部分(可能会维护、会迭代、会扩展)的代码抽离出来形成一类

2、封装:就是将类的属性包装起来,不让外界轻易知道它内部的具体实现;只提供对外接口以供调用

3、继承:从已有对象上继承出新的对象

4、多态:一个对象的不同形态

面向对象的好处

1、代码的层次结构更清晰
2、更容易复用
3、更容易维护
4、更容易扩展

面向对象相关的属性和概念

__proto__
属性原型链,实例对象与原型之间的连接,叫做原型链。

 

 

 

 

对象身上只有 proto 构造函数身上有prototype也有 proto

constructor
返回创建实例对象的构造函数的引用,每个原型都会自动添加constructor属性,for..in..遍历原型是找不到这个属性的。


var
a = new
A();

console.log(a.constructor == A) //true

hasOwnProperty
可以用来判断某属性是不是这个构造函数的内部属性(不包括继承的)

 

 

 

 

语法: obj.hasOwnProperty(prop) 返回Boolean


function
A (){

    this.b = 1;

}

var
a = new
A();

console.log(a.hasOwnProperty('b')); //打印true

console.log(a.hasOwnProperty('toString'));//toString是继承属性 打印 false

console.log(a.hasOwnProperty('hasOwnProperty'));//同上,打印false

nstanceof
二元运算符,用来检测一个对象在其原型链中是否存在一个构造函数的 prototype 属性。

 

 

 

 

语法: object instanceof constructor 即检测 constructor.prototype 是否存在于参数 object 的原型链上。


// 定义构造函数

function
C(){}

function
D(){}

 

var
o = new
C();

oinstanceof
C; // true,因为 Object.getPrototypeOf(o) === C.prototype

oinstanceof
D; // false,因为 D.prototype不在o的原型链上

oinstanceof
Object; // true,因为Object.prototype.isPrototypeOf(o)返回true

C.prototypeinstanceof
Object // true,同上

toString
返回一个表示该对象的字符串

 

 

 

 

作用:
1、进行数字之间的进制转换


例如:var
num = 255;

alert( num.toString(16) ); //结果就是'ff'

2、利用toString做类型的判断


例如:var
arr = [];

alert( Object.prototype.toString.call(arr) == '[object Array]' );     弹出true

Object.prototype.toString.call()    得到是类似于'[object Array]'  '[object Object]'

  这里比较浅显的讲述了一下Javascript中对象的创建和对象方法的添加以及对象属性的删除。对象在javascript面向对象中是一个比较重要的,也算是一个比较基础的部分,只有弄清楚了对象的一些常用操作才能够进行面向对象开发。

面向对象的写法历程

 

1、原始模式

假如我们有一个对象是狗的原型,这个原型有“名字”和“颜色”两个属性。

var Dog = {
name: ”,
color: ”
}
根据这个原型对象,我们要生成一个实例对象如下


var
hashiqi = {}; //创建空对象,之后根据原型对象的相应属性赋值

hashiqi.name = 'hashiqi';

hashiqi.color = 'blackandwhite';

缺点:
1、如果要生成多个实例对象,要重复写多次。
2、实例和原型之间没有联系。

 

点击有惊喜

威尼斯wns.9778官网 1

  三 总结

JavaScript的对象

 

对象是JavaScript的一种数据类型。对象可以看成是属性的无序集合,每个属性都是一个键值对,属性名是字符串,因此可以把对象看成是从字符串到值的映射。这种数据结构在其他语言中称之为“散列(hash)”、“字典(dictionary)”、“关联数组(associative array)”等。

原型式继承:对象不仅仅是字符串到值的映射,除了可以保持自有的属性,JavaScript对象还可以从一个称之为原型的对象继承属性,对象的方法通常是继承的属性,这是JavaScript的核心特征。

JavaScript对象是动态的—可以新增属性也可以删除属性,但是他们常用来模拟静态以及静态类型语言中的“结构体”

  要了解面向对象,首先就要了解Javascript中的对象和原型。这篇文章中主要学习一下Javascript中的对象。

对象属性的获取和设置

 

 

可以通过点(.)或方括号([])运算符来获取和设置属性的值。


var
author = book.author;

var
title = book["main title"];

在JavaScript中能用 . 连接的都可以用 []连接。有很多 . 运算符不能用的时候,就需要用[]代替。
1、在属性名可变的情况下用[]


function
getAttr (obj, attr) {

    console.log(obj[attr])

}

2、属性名有空格或者连字符等时用[]


var
title = book["main title"];
var user = {
name:'念在三角湖畔', //给对象添加属性
age:22,
address:'湖北武汉'
};
alert(user.name);//返回‘念在三角湖畔'
delete user.name;//删除user的name属性
alert(user.name);//返回‘undefined' 

编码思想

 

 

两种编程方式:
(1)、面向过程
(2)、面向对象

两者的区别:
面向过程:关注实现过程和每一步的实现细节。
面向对象:关注特征和功能。

//使用JSON法创建
/*
简单的JSON对象:{name:'念在三角湖畔',age:22,address:'湖北武汉'}
*/
var user = {
name:'念在三角湖畔',
age:22,
address:'湖北武汉' 
};
alert(user.name   " "  user.age);//返回 '念在三角湖畔 湖北武汉' 

本文由威尼斯wns.9778官网发布于计算机教程,转载请注明出处:JavaScript的面向对象

关键词:

上一篇:威尼斯wns.9778官网:Nodejs抓取html页面内容(推荐

下一篇:没有了