跳到主要内容

JS对象与函数的运用

Object 增删改查

删除

对于所有情况,返回值为true

let obj = {
'name' : 'aziz',
'age' : 18
}

定义为undefined | nulldelete obj.

obj.name = undefined;    // undefined 为「空」 不是没有
'name' in obj // true。name不添加‘’,name则为变量名

delete obj.name; // 彻底删除
delete obj['name'];

增加和修改属性

增加和修改属性方法类似,没有属性直接添加,有该属性直接赋值

let obj = { 'name': 'aziz' , 'age' : '18'}
obj.name = "吴彦祖"
obj.['name'] = '刘德华'
obj.['na'+'me'] = '周杰伦'

利用asssign批量修改

Object.assign(obj,{ gender:'男', id:'130'})

查询

通过对象keys()values()查询

let obj = {
'name' : 'aziz',
'age' : 18
}

Object.keys()
Object.keys(obj) // (2) ["name", "age"]

Object.values()
Object.values(obj) // (2) ["aziz", 18]

判断属性是否自身属性还是共有的

‘name’ in obj; 		// 只能查看是否有此属性
'toString' in obj; // 自身并没有 toString 属性,同样返回 true

obj.hasOwnProperty('name'); // 查看自身是否有该属性
// API英语解析:has 有 own 自身 property 属性

原型链

xxx.prototype

函数无法修改原型,而一旦只要找到原型的位置即可随意修改原型函数

共有属性的合集就是原型prototype

修改共有属性

obj.__proto__.toString = 'xxx'
obj.__proto__ = null
Object.prototype.toString = 'xxx'

修改隐藏属性:Object.create

let common = {'国籍':'中国', '性别':'男'}
let obj = Object.create(common)

console.dir(obj)
Object
__proto__:
国籍: "中国"
性别: "男"

⚠️注意:所有的数据类型都是由Function构造出来的

除去``Null Undefined其他数据类型的构造者都是Function`

Number.constructor === Function
String.constructor === Function
Syboml.constructor === Function
Boolean.constructor === Function
Object.constructor === Function
// 连Function自身构造者都相等,可以理解JS引擎在加载浏览器的时候初始化Function
Function.constructor === Function

有关widow的问题

所有属性可以通过contructor查看构造者

  1. windowWindow 构造出来的
  2. window.Object 是有window.Function构造出来
  3. window.Function 由浏览器(js引擎)构造出来

构造函数

new() 与 this 操作流程

  1. 创建空对象
  2. 为空对象关联原型X.prototype
  3. 将空对象作为this关键字运行构造函数
  4. 自动 return this

代码预定规范

构造函数首字母大写,函数首字母小写

其他函数一般使用动词开头


class 类

属于ES6新语法class

function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.sayHi = function(){
console.log( '你好,我叫' + this.name + ',今年' + this.age + '岁!')
}


class Person{
constructor(name,age){
this.name = name;
this.age = age
}
sayHi(){
console.log('你好,我叫' + this.name + ',今年' + this.age + '岁!')
}
}

// !输出结果 ↓
let person = new Person('Aziz', 18)
person.sayHi()
// 你好,我叫Aziz,今年18岁!

对象分类

  • 宿主对象(host Objects):由 JavaScript 宿主环境提供的对象,它们的行为完全由宿主环境决定。

  • 内置对象(Built-in Objects):由 JavaScript 语言提供的对象。

    • 固有对象(Intrinsic Objects ):由标准规定,随着 JavaScript 运行时创建而自动创建的对象实例。
    • 原生对象(Native Objects):可以由用户通过 Array、RegExp 等内置构造器或者特殊语法创建的对象。
    • 普通对象(Ordinary Objects):由语法、Object 构造器或者 class 关键字定义类创建的对象,它能够被原型继承。

例子

  1. 对象有一样的属性和行为。如square1square2
  2. 对象拥有其他的属性和行为。如Square / Circle / Rect等等不同的分类
  3. Array 和 Function 也是不同分类

Object创建出来的最没有特色的分类let obj = {}

数组对象

定义一个数组

let arr = [1,2,3]
// 属性名:字符串和length(不能被遍历)

数组共有属性

// 常用的有
push | pop | shift | unshift | join

函数对象

定义一个函数

function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn = (x,y) => x+y
let fn = new Function('x','y','return x+y')

函数自有属性

name | length

函数共有属性

// 常用
call | apply | bind

call | apply | bind

文章

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

function Student(name, age) {
People.call(this, name, age);
this.country = 'China';
console.log('欢迎回来,' + this.name + ' !' )
}

let sam = new Student('sam', 10);
let boys = new Student('boys', 11);
function student(name, age){
console.log(this.sayHello + ',我叫'+ name + ',今年' + age + '岁!')
}
let obj = { sayHello: '我来自广州市第一人民学校'}

// 先定义才能使用 function 函数
obj.fn = student
obj.fn('aziz',18)
//我来自广州市第一人民学校,我叫aziz,今年18岁!

student.apply(obj, ['数组', 1]);
// 我来自广州市第一人民学校,我叫数组,今年1岁!

student.bind(obj)(console.log('hi'), console.log('hello'));
// hi
// hello
// 我来自广州市第一人民学校,我叫undefined,今年undefined岁!

student.call(obj, 'call', 19);
// 我来自广州市第一人民学校,我叫call,今年19岁!

三者都拥有一样的能力完成同一件事

function bind()

window.name = "global "
function student(){
console.log('对象 ' + this.name)
}
let callName = {name:'callName'}
let obj = {
name: 'aziz',
fn: student.bind(),
fn2: student
}

obj.fn.call(obj)
obj.fn2.call(obj)
console.log('======')
obj.fn.apply(obj)
obj.fn2.apply(obj)
console.log('======')
obj.fn.bind(callName)()
obj.fn2.bind(callName)()

一旦被函数bind以后,其this会被锁定无法更改。


end.