JS面向对象(一)

作者: 雅玲哑铃 | 来源:发表于2017-12-20 21:17 被阅读20次

一、对象定义的三种方式

1、直接定义对象

var obj1 = {
  name:"李四",
  age:18,
}

2、追加定义对象

var  obj2 = new Object();
obj2.name = "张三";
obj2.age = 20;

3、

var obj3 = Object.create({name:"张三",age:20});

以上三种都是js对象定义的方法,在上面obj2对象的基础上,我们再写以下一段代码,会覆盖之前obj2对象的所有属性,所以不能这样写

obj2 = {
    height:"180cm",
    "hobby":function(){
        console.log("喜欢篮球")
    }
 }

二、对象的调用

  obj2.name;

三、比较对象的追加写法与json串

//对象追加
var obj = {name:"李四","height":"178cm",'hobby':function(){ console.log("喜欢篮球") }};
//json串
var jsonStr = '{"name":"张三","age":"19"}'

总结:对象键值可以加双引号/单引号,也可以不加
   json串的键值对一定要加双引号

四、对象和json之间的转换

//对象转化为json
var json1 = JSON.stringify(obj);
//json转化为对象
var new  = JSON.parse(jsonStr);

五、传值和传址问题,对象赋值——传址

1、基本数据类型赋值——传值

var a = 1;
var b = a;
b = 10;   //改变b值得情况下,a值不受影响

如果从一个变量向另一个变量复制基本类型的值,会在变量变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上 ----《JavaScript高级程序设计》

也就是说,传值得过程经历了以下几步:
1、复制变量的值
2、申请一个新的内存地址保存复制的值
3、把复制的值的新地址赋给新的变量
所以两个变量的值只是在数值上相等,其实在内存中是两个地址,是互相独立的存在
因此其中一个发生改变时并不会影响到另外一个

2、复杂数据类型赋值——传址

对象赋值
var obj3 = obj;
obj2.name = "小红";
console.log(obj.name);  //"小红";

当从一个变量向另一个变量复制引用的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。
不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上引用同一个对象。
----《JavaScript高级程序设计》

也就是说,传址其实就是把一个变量在内存中的地址传给另一个变量
改变一个变量,就会影响另外一个变量

数组赋值
var arr = [1,2,3,4,5];
var arr2 = arr;
arr2[1] = 6;
console.log(arr);    //  [1,6,3,4,5]

为了避免这种传址问题带来的不便,我们采用深拷贝来解决这类问题

var arr = [1,2,3,4,5];
var arr2 = JSON.parse(JSON.stringify(arr));  //这种写法是arr与arr2地址之间不互相影响,arr2是新开辟的一块地址
arr2[1] = 6;
console.log(arr) ;    // [1,2,3,4,5] 

六、js中let、var、const 的区别

1、const 定义常量,不可以再次修改,而且必须初始化(必须给值)

// const b;   报错,必须初始化
const PI = "3.1415926";
// const PI = "3.14"; 错误,不能重复定义

2、var 定义的变量可以修改,如果不初始化会输出undefined,不会报错,var 定义全局变量,各处都能使用

var a = 1;
console.log(a);   //可以输出a=1
function change(){
    a = 4;
    console.log(a);  //可以输出a=4
} 
change();
console.log(a);  //可以输出a=4

3、 let 是块级作用域,只能在块级内部使用

七、构造函数(类似于类的概念) 函数名首字母大写

1、构造函数的定义

function Dog(name,sex){
    this.name = name;
    this.sex = sex;
    this.action = function(){
        console.log("汪汪.....");
    }
}

2、调用构造函数(实例化)

关键字:new 把抽象类具体化,把类实例化成对象
new 具体做了三件事:
(1)、创建了空对象  var obj = { }; 
(2)、改变this指向
(3)赋值原型 obj.proto = Dog.prototype;

var dahuang = new Dog("大黄","母");
dahuang.action();   

3、补充三个可以改变this指向的函数 call apply bind

function test(name,age){
    console.log(name,age);
    console.log(this);
}
var obj = {
    name:"张三",
    age:19
}
test.call(obj,"lili",19);  //call()函数使this指obj,否则this指向window
test.apply(obj,["李四",10]);
//call()接收字符串传参,apply接收数组传参
test.bind(obj)("小李",20);

4、原型

对象(实例化之后)是由自身和原型共同构成的,对象原型是proto
构造函数(实例化之前)是由自身和原型共同构成的,构造函数的原型prototype

5、proto和prototype对比

function Person(name){
    this.name = name;
}
var newPerson = new Person();
console.log(Person.prototype===newPerson.__proto__);  //true

6、通过原型找到构造函数

function Person(name){
    this.name = name;
}
console.log(Person.prototype.constructor);  //找到构造函数

相关文章

  • JS面向对象精要(二)_函数

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(三)_理解对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(四)_构造函数和原型对象

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JS面向对象精要(五)_继承

    JS面向对象精要(一)_原始类型和引用类型JS面向对象精要(二)_函数JS面向对象精要(三)_理解对象JS面向对象...

  • JavaScript笔记(一)

    一、面向对象面向过程的区别 1、什么是js对象 js对象:属性和方法的集合,js所有数据都可以看成对象...

  • js 面向对象和面向过程

    js 面向对象和面向过程

  • 面向对象OOP--JS

    作者:烨竹 JS面向对象简介 JS名言:万物皆对象 JS面向对象比PHP简单很多;因为JS中没有class关键字,...

  • 2018-01-18

    js中的面向对象核心 js是基于对象的编程语言,在后面的学习中我们通过一种模式使其转化成为面向对象的语言。js面向...

  • JS面向对象

    JS面向对象入门 1、面向对象语言概念面向对象语言主要包括 类、对象、封装、多肽。2、面向对象的编程思想面向过程思...

  • JS高级3-语言特性

    一、 JS面向对象编程 1、 面向对象介绍 什么是对象? Everything is object (万物皆对象)...

网友评论

    本文标题:JS面向对象(一)

    本文链接:https://www.haomeiwen.com/subject/sglnwxtx.html