js对象

Posted 2021-03-04 calm寻路人

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js对象相关的知识，希望对你有一定的参考价值。

一：js对象的创建:

(1):创建对象：在javascript中，除了字符串、数字、逻辑值和undefined等原始值之外，其他的值都是对象

<!DOCTYPE html>
<html>
<head>
    <title>function</title>
    <script type="text/javascript"></script>
<script>
//javacsipt提供了三种创建对象的方法:直接量,new关键字或Object.create()方法。
/*
1:使用直接量创建对象:
*/
var x = {}  //创建了一个空对象
var a = {name:"Javascript程序设计",price:25} //创建了一个有name和price属性的对象。
document.write(‘x的数据类型:‘+typeof x)
document.write(‘<br>a的数类型:‘+typeof a)
document.write(‘<br>a的属性name‘+a.name)
document.write(‘<br>a的属性 price‘+a.price)
/*
2:使用new关键字创建对象:
javascript中的原始数据类型都包含内置的构造函数,例如,Object(),Array(),Date()等都是构造函数.
*/
var a1 = new Object() //创建一个空对象
var a2 = new Object({name:"javascript中的原始数据类型都包含内置的构造函数",price:25})
var d = new Date()
document.write(typeof a1)
document.write(‘<br> a2‘+a2.name,a2.price)
document.write(‘<br>d‘+d)

/*
3:使用Object.create()方法创建对象:Object.create()方法用null做参数时，创建一个空对象,使用对象常量或其他原型对象做参数时，新对象继承所有的属性和属性值
*/
var a = Object.create({name:‘c++‘,price:12}) //创建了一个对象
for (p in a)
{
    document.write(‘<br>对象的‘+p+‘属性值:‘+a[p])
}
document.write(‘<br>‘)
a[‘name‘] = ‘HTML‘ //修改属性
document.write(a[‘name‘])

/*
4:with语句:在with语句定义的代码块中,可以直接使用对象的属性和方法，而不要对象名作为前缀.
基本语法格式:
with(对象)
{
    语句
}
*/
function Books(name,pricez)  //使用构造函数.
{
    this.name = name
    this.pricez = pricez
}
var z = new Books(‘c++如梦‘,40)
document.write(‘对象a:‘)
with(z)
{
    document.write(‘name=‘+name)
    document.write(‘:price=‘+pricez)
}
</script>
</head>
<body>
    
</body>
</html>

(2):对象方法和属性:

<!DOCTYPE html>
<html>
<head>
    <title>function</title>
    <script type="text/javascript"></script>
<script>
/*
1:对象的方法：
即通过对象调用的函数,在方法中可以用this关键字来引用当前对象,将函数赋值给对象属性,该属性即可称为方法,通过该属性来引用函数.作为方法使用的属性,可称为方法属性.
*/
function print()//定义对象的方法
{
    for (p in this)  //通过this关键字来引用当前对象
    {
        document.write(‘<br>属性p:‘+p)
        document.write(‘<br>属性‘+p+‘=‘+this[p])
    }
}
function count(c)
{
document.write(‘<br>对象b‘+c)
document.write(‘<br>b.name‘+this.name)
}
var a = {name:‘c++‘,price:12}
//在引用对象方法时out属性是在引用对象方法的时候才创建的
a.out = print  //用对象的属性来引用对象的方法
a.out()//out就为方法属性,out的属性值就是函数体,
var b = {name:‘Make‘,ago:20}
b.deng = count
b.deng(5)
//查看对象的deng属性
document.write(‘<br>b.deng=‘+b.deng)

/*
对象的构造函数:构造函数要和new关键字一起使用
*/
function prints()
{
    for(ps in this)
    {
        if(‘function‘===typeof this[ps])
            continue  //跳过方法
    document.write(‘<br>&nbsp;&nbsp;属性‘+p+‘=‘+this[ps])//输出属性及其值
    }
}
function Book(name,price)
{
    this.name = name   //使用this访问当前对象
    this.price = price
    this.insert = prints
}
var s = new Book(‘c++入门‘,40)  //执行构造函数
document.write(‘<br>‘)
document.write(‘对象s:‘)
document.write(‘<br>‘)
s.insert() //执行对象方法;
</script>
</head>
<body>
    
</body>
</html>

(3):原型对象:

<!DOCTYPE html>
<html>
<head>
    <title>function</title>
    <script type="text/javascript"></script>
<script>
function Books(name,price) //定义构造函数
{
    this.Book = function()
    {
        document.write(‘在构造函数中定义了方法,每个由构造函数创建的对象均拥有方法函数的副本‘);
    }
    this.name = name    //this是当前对象.
    this.price = price
}
//每个方法都有一个pritotype属性.用来引用原型对象.
Books.prototype.publisher = ‘人民邮电出版社.‘ //定义原型对象属性.
Books.prototype.out = function() //定义原型对象方法.
{
document.write(‘<br>这是原型对象的out()方法的输出.‘)
}
var b = new Books(‘ASP现在该不该学‘,38)
document.write(‘<p>对象b:‘)
with(b)
{
    document.write(‘<br>name = ‘+name)
    document.write(‘<br> price = ‘+price)
    document.write(‘<br>publisher = ‘+publisher)//publisher为继承自原型对象的属性.
    out() //打印出的out()方法就是引用的函数体.
    document.write(‘<br>‘)
    Book() //继承的函数.
}
document.write(‘<p>添加到属性和方法,对象b:‘)
b.publisher = ‘清华大学出版社.‘
b.out = function()
{
    document.write(‘<br>这是对象的out()方法的输出.‘)
}
with(b)
{
    document.write(‘<br> name =‘+name)
    document.write(‘<br> price = ‘+price)
    document.write(‘<br>publisher = ‘+publisher)
    out()
    document.write(‘<br>‘)
    Book()
}
</script>
</head>
<BODY>
    
</BODY>
</html>

(4):继承：

<!DOCTYPE html>
<html>
<head>
    <title>window对象</title>
    <script type="text/javascript"></script>
    <style type="text/css"></style>
<script>
     var a = Object.create(window) //a继承自window对象.
     document.write(‘<br>:‘+typeof(a))
     window.onerror = function (msg,url,line)
     {
         alert(‘出错了:
错误信息:‘+msg+‘
错误文档:‘+url+‘
出错位置:‘+line)
     }
     var  a = 10
     x = a+b
</script>
</head>
<body>
    
</body>
</html>

(5):自定义对象属性引用对象:

<!DOCTYPE html>
<html>
<head>
    <title>属性引用对象</title>
</head>
<script type="text/javascript">
    var a = {}; //定义一个空对象.
    console.log(typeof a);
    var e = {p:{c:"deng"}}
    console.log(e.p);
    console.log(typeof e.p);
    console.log(e.p.c);
</script>
<body>

</body>
</html>

(6):微信小程序中使用到的创建js对象的方法:在微信小程序框架中,js文件中就使用到下面这种方式来创建对象:

<!DOCTYPE html>
<html>
<head>
    <title>对象属性</title>
</head>
<script type="text/javascript">
    
    function page(ob){
        console.log(ob.data);
        return ob; //返回的是一个通过page方法创建的对象.
    }
    var ob = page({ //在微信小程序中page.js中用到这种方法;
        data:"mysql database",
        fun:function(){console.log(‘属性引用一个函数‘);},
        duixian:{p:"我是一个属性引用的对象的属性值"}
    })
    var ob1 = ({
        data:{

        },//data属性引用对象.
        person:{

        }
    })
    console.log(typeof ob);
    ob.fun(); //属性引用一个函数
    console.log(ob.duixian.p); //我是一个属性引用的对象的属性值
    ob.fun1 = function(){
        console.log(‘使用.操作符调用属性‘);
    }
    ob.fun1();//使用.操作符调用属性
    ob[‘fun2‘] = function(){
        console.log(‘使用中括号调用属性‘);
    }
    ob.fun2();
</script>
<body>

</body>
</html>

以上是关于js对象的主要内容，如果未能解决你的问题，请参考以下文章

js代码片段

VSCode自定义代码片段12——JavaScript的Promise对象

AJAX相关JS代码片段和部分浏览器模型

web代码片段

为什么我不能在此片段中生成唯一对象数组？