05-JS基础-对象

JavaScript的对象是一种带有属性和方法的特殊数据类型,它由若干键值对组成。

var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村'
};
创建对象
  1. 对象初始化器
var obj = {
    name: '漩涡鸣人',
    age: 17,
    gender: '男',
    hometown: '火之国 木叶村',
    run:function () {
        alert("跑步");
    }
};
  1. 构造函数
var obj = new Object();
obj.name = "xiaolan";
obj.age = 17;
function ninja(name, gender, hometown) {
    this.name = name;
    this.gender = gender;
    this.hometown = hometown;

    function work() {
        alert("暗杀");
    }
}

var ninja = new ninja("旗木卡卡西", "男", "木叶村");
属性名和属性值

向对象中添加属性:
对象.属性名 = 属性值;
对象["属性名"] = 属性值;

读取对象中的属性:
对象.属性名
对象["属性名"]

如果读取一个对象中没有的属性,它不会报错,而是返回一个undefined。

删除对象中的属性:
delete 对象.属性名
delete 对象["属性名"]

检查对象中是否含有指定属性:
"属性名" in 对象

如果在对象中含有该属性,则返回true,如果没有则返回false。

对象的属性名不强制要求遵守标志符规范,但使用时还是尽量按标识符规范来写。
如果要使用特殊的属性名,需要采用 对象[] = 属性值 格式,存取都需要这种格式。

// 格式一
obj.name = "xiaoming";
var res = obj.name;
// 格式二
obj ["name"] = "test";
var res1 = obj ["name"];

// 检查obj中是否包含"name"属性
if ("name" in obj){
}
  • 基本数据类型与引用数据类型
  • 基本数据类型:
    Number、String 、Boolean、Null和Undefined
    基本数据类型是按值访问的,因为可以直接操作保存在变量中的实际值。
var a = 10;
var b = a;
b = 20;
console.log(a); // 10值
/*
* b获取的是a值得一份拷贝,虽然,两个变量的值相等,但是两个变量保存了两个不同的基本数据类型值。
* b保存了a复制的一个副本。所以,b的改变,对a没有影响。同样a改变,对b也没有影响。 
*/
基本数据类型赋值的过程
  • 引用类型数据:
    对象类型为 Object,比如:Object 、Array 、Function 、Data等。
    javascript的引用数据类型是保存在堆内存中的对象。
    不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。
    所以,引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
var obj1 = new Object();
var obj2 = obj1;
obj2.name = "xiaobai";
console.log(obj1.name); // xiaobai
/*
* 这两个引用数据类型指向了同一个堆内存对象。
* obj1赋值给pbj2,实际上这个堆内存对象在栈内存的引用地址复制了一份给了obj2.
* 实际上他们共同指向了同一个堆内存对象。实际上改变的是堆内存对象。
* */
引用数据类型赋值过程
函数

函数是由一连串的子程序(语句的集合)所组成的,可以 被外部程序调用。向函数传递参数之后,函数可以返回一 定的值。
函数也是一个对象,也具有普通对象的功能。
函数中可以封装一些代码,在需要的时候可以去调用函数来执行这些代码。
使用typeof检查一个函数时会返回function。

  • 创建函数
  1. 构造函数(一般不用)
var work = new Function(
    "console.log('工作');"
);
  1. 函数声明
// [] 表示可选,函数可以没有参数
function 函数名([形参1,形参2...形参N]){
    语句...
}
  1. 函数表达式
var 函数名 = function([形参1,形参2...形参N]){
    语句...
};
  • 调用函数

语法:函数对象([实参1,实参2...实参N]);

当我们调用函数时,函数中封装的代码会按照编写的顺序执行。

  • 形参和实参
    形参:形式参数
    定义函数时,可以在()中定义一个或多个形参,形参之间使用","隔开。
    定义形参就相当于在函数内声明了对应的变量但是并不赋值,形参会在调用时才赋值。
    实参:实际参数
    调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参, 调用函数时JS解析器不会检查实参的类型和个数,可以传递任意数据类型的值。
    如果实参的数量大于形参,多余实参将不会赋值,如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined。
function personInfo(info) {
    console.log(info);
}

var person = {
    name : "Conan",
    age : 16,
    address : "Tykyo"
}

this.personInfo(person); // {name: "Conan", age: 16, address: "Tykyo"}
// 将匿名函数作为实参,传递给一个函数
function fun(a) {
    a(); 
}
this.fun(function () {
    console.log("匿名函数实参");
});

function sum(a, b) {
    var sum = a + b;
    console.log(a + " + " + b + " = " + sum);
    return sum;
}
function fun(f, a, b) {
    f(a, b);
}
this.fun1(sum, 2, 8); // 2 + 8 = 10
  • 返回值
    返回值就是函数执行的结果。
    使用return 来设置函数的返回值。

语法:return 值;

function sum(a, b) {
    var sum = a + b;
    return sum;
}
console.log("return = " + this.sum(3, 8)); // 11

return后边的代码都不会执行,一旦执行到return语句时,函数将会立刻退出。
return后可以跟任意类型的值,可以是基本数据类型,也可以是一个对象。
如果return后不跟值,或者是不写return则函数默认返回undefined。

  • break、continue和return

    • break
      - 退出循环
    • continue
      - 跳过当次循环
    • return
      - 退出函数
  • 立即执行函数
    往往只会执行一次。

(function() {
    console.log("立即执行函数");
})();

(function(a,b) {
    console.log("a = " + a);
    console.log("b = " + b);
})(10,11);
  • 方法(method)
    可以将一个函数设置为一个对象的属性,当一个对象的属性是一个函数时,我们称这个函数是该对象的方法。

调用格式:对象.方法名();

var obj = new Object();
obj.name = "xiaobai";
obj.sayHi = function () {
    console.log("xiaobai hello");
};

console.log(obj.sayHi);
obj.sayHi();

var obj2 = {
    name: "xiaoli",
    sayHi: function () {
        console.log("xiaoli hello");
    }
};
obj2.sayHi();
  • call()和apply()
    这两个方法都是函数对象的方法,需要通过函数对象来调用。
    当对函数调用call()和apply(),都会 执行函数。
    调用call()时,可以将一个对象指定为第一个参数,第二个参数开始为实参。
    调用apply()时,可以将一个对象指定为第一个参数,实参需要封装到数组中统一传递。
function fun5() {
    console.log(this.name);
}

fun5.call();
fun5.call(obj1); // xiaolan
fun5.call(obj2); // xiaobai
// fun5.apply();

function fun6(a, b) {
    console.log("a = " + a);
    console.log("b = " + b);
}

fun6.call(null,2,4);
fun6.apply(null, [3,6]);
  • arguments
    在调用函数时,浏览器每次都会传递进两个隐含的参数,
    1)函数上下文对象this
    2)封装实参的对象arguments,argument是一个类数组对象
    即使函数不定义形参,也可以通过arguments来使用实参。
function fun7() {
    console.log(arguments);
    console.log(arguments.callee); // 正在执行的函数对象,即fun7
}
fun7(); // Arguments []
fun7("hi", 1); // Arguments ["hi", 1]
作用域

作用域简单来说就是一个变量的作用范围。

  • 全局作用域
    1)直接在script标签中编写的代码都运行在全局作用域中。
    2)全局作用域在打开页面时创建,在页面关闭时销毁。
    3)全局作用域中有一个全局对象window,window对象由浏览器提供,可以在页面中直接使用,它代表的是整个的浏览器的窗口。
    4)在全局作用域中创建的变量和函数都会作为window对象的属性保存,可以在页面的任意位置访问。
    5)在函数作用域中也可以访问到全局作用域的变量。

  • 函数作用域
    1)函数作用域是函数执行时创建的作用域,每次调用函数都会创建一个新的函数作用域。
    2)函数作用域在函数执行时创建,在函数执行结束时销毁。
    3)在函数作用域中创建的变量,不能在全局中访问。
    4)当在函数作用域中使用一个变量时,它会先在自身作用域中寻找,如果找到了则直接使用,如果没有找到则到上一级作用域中寻找如果找到了则使用,找不到则继续向上找。

  • 变量的声明提前
    在全局作用域中,使用var关键字声明的变量会在所有的代码执行之前被声明,但是不会赋值,undefined。
    所以我们可以在变量声明前使用变量。但是不使用var关键字声明的变量不会被声明提前。
    在函数作用域中,也具有该特性,使用var关键字声明的变量会在函数所有的代码执行前被声明,如果没有使用var关键字声明变量,则变量会变成全局变量。

console.log("a = " + a); // undefined
console.log("b = " + b); // Can't find variable: b

var a = 123;
b = 111;
  • 函数的声明提前
    在全局作用域中,使用函数声明创建的函数(function fun(){}),会在所有的代码执行之前被创建,也就是我们可以在函数声明前去调用函数,但是使用函数表达式(var fun = function(){})创建的函数没有该特性。
    在函数作用域中,使用函数声明创建的函数,会在所有的函数中的代码执行之前就被创建了。
fun1(); // "函数声明"
fun2(); // fun2 is not a function.

function fun1() {
    console.log("函数声明");
}

var fun2 = function () {
    console.log("函数表达式");
}
this(上下文对象)

我们每次调用函数时,解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象,根据函数的调用形式不同,this的值也不同。
this的不同的情况:
1.以函数的形式调用时,this是window
2.以方法的形式调用时,this就是调用方法的对象
3.以构造函数的形式调用时,this就是新创建的对象

function fun3() {
    console.log(this);
}

var obj3 = {
    name: "Naruto",
    sayName: fun3
};

fun3(); // Window {personInfo: function, fun1: function, …}
obj3.sayName(); // Object:{name: "Naruto", sayName: function}
构造函数

1)构造函数是专门用来创建对象的函数。
2)一个构造函数我们也可以称为一个类。
3)通过一个构造函数创建的对象,我们称该对象是这个构造函数的实例。
4)通过同一个构造函数创建的对象,我们称为一类对象。
5)构造函数就是一个普通的函数,只是他的调用方式不同:
  如果直接调用,它就是一个普通函数
  如果使用new来调用,则它就是一个构造函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}

function Dog(name, age) {
    this.name = name
    this.age = 2;
}

var p = new Person("Luffy", 17);
var d = new Dog("旺财", 2);
console.log(p); // Person {name: "Luffy", age: 17}
console.log(d); // Dog {name: "旺财", age: 2}
  • instanceof
    用来检查一个对象是否是一个类的实例。

语法:对象 instanceof 构造函数

// 如果该对象是构造函数的实例,则返回true,否则返回false。
console.log(p instanceof Person); // true

Object是所有对象的祖先,所以任何对象和Object做instanceof都会返回true。

  • 枚举对象中的属性
    使用 for in语句

语法:
for (var 变量 in 对象){
}

var obj = new Object();
obj.name = "xiaobai";
obj.age = 11;
obj.address = "Beijing";

for (var attr in obj) {
    console.log(attr + " = " + obj[attr]); // attr为obj中的属性名,obj[attr]为该属性对应的属性值
}
原型 prototype

创建一个函数以后,解析器都会默认在函数中添加一个prototype属性。
prototype属性指向的是一个对象,这个对象我们称为原型对象。
当函数作为构造函数使用,它所创建的对象中都会有一个隐含的属性执行该原型对象。
这个隐含的属性可以通过对象.__proto__来访问。


prototype属性
function MyClass(){

}
MyClass.prototype.test = 666;
MyClass.prototype.work = function () {
    console.log("工作");
};

var mc = new MyClass();
console.log(MyClass.prototype); // MyClass {}
console.log(mc.__proto__);      // MyClass {}
console.log(mc.test);
mc.work();

原型对象就相当于一个公共的区域,凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象。
我们可以将对象中共有的属性和方法统一添加到原型对象中,这样我们只需要添加一次,就可以使所有的对象都可以使用。

当我们去访问对象的一个属性或调用对象的一个方法时,它会先自身中寻找,如果在自身中找到了,则直接使用。如果没有找到,则去原型对象中寻找,如果找到了则使用,如果没有找到,则去原型的原型中寻找,依此类推。直到找到Object的原型为止,Object的原型的原型为null,如果依然没有找到则返回undefined。

  • hasOwnProperty()
    这个方法可以用来检查对象自身中是否含有某个属性。

语法:对象.hasOwnProperty("属性名")

使用 in 检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true。

console.log("test" in mc); // true
console.log(mc.hasOwnProperty("test")); // false
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,293评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,604评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,958评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,729评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,719评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,630评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,000评论 3 397
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,665评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,909评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,646评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,726评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,400评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,986评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,959评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,197评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,996评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,481评论 2 342

推荐阅读更多精彩内容

  • 函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句,而且...
    道无虚阅读 4,521评论 0 5
  •   面向对象(Object-Oriented,OO)的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意...
    霜天晓阅读 2,092评论 0 6
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,096评论 0 21
  • 1,javascript 基础知识 Array对象 Array对象属性 Arrray对象方法 Date对象 Dat...
    Yuann阅读 889评论 0 1
  • 老妈晚上第一次照光,希望一切都顺顺利利的。
    凉凉心阅读 140评论 0 0