本文内容搬运自公众号 原文链接


本文主要内容:面向对象

预计阅读时间:6分钟

面向对象的方式

  • 单例模式(字面量定义) var obj = {}

  • 类的实例 var obj = new Object()

  • 工厂创建

  • 构造函数 扮演了三种角色,(普通函数、普通对象、类)

面向对象相关问题

  • 构造函数里的属性怎么看?看this,谁前面有this谁就是属性
function Zhoumao(name, age) {
var name = '昼猫'
this.name = name;
this.age = age; // name 不属于
}
  • 如何查找面向对象中的this
  1. 构造函数里的this执行实例对象

  2. 如果是方法中的this,分以下几种情况
    a. 找到this 在调用方式时,看方法前的 . 是谁,this就是谁
    b. 替换this 将this化成找到的那个结果
    c. 精确查找 用原型链查找模式

  3. 关于构造函数中的返回值
    构造函数也是函数,每个函数都有返回值,构造函数返回的是this

  4. 原型的批量添加和直接对象添加的区别

如果是批量添加属性,没有改变原型的内存地址(浏览器开辟)
如果是以对象形式添加,就会更改原型的内存地址,浏览器开辟的就会销毁

function Zhoumao() {
this.name = 'zhoumao'
}
Zhoumao.prototype.age = '12'
Zhoumao.prototype = {
sxc: 44
}
var zm = new Zhoumao
var hello = new Zhoumao
console.log(hello.age) // undefined
  • 如何给内置类添加方法

如果给内置类的原型添加方法,使用对象形式添加,不起作用。因为浏览器会保护内置类对象的原型内存地址,只能使用批量的形式添加方法

// 这种方法是错的
Array.prototype = {
sum: function () {}
// 只能用这种方法添加
Array.prototype.sum = function () {}
}
  • 拷贝

    • 浅拷贝:利用 for in 将一个对象的属性,一个一个的复制到另一个对象中
var obj = {
name: '昼猫',
age: '12'
}
var obj2 = {}
for(var key in obj){
obj2[key] = obj[key]
}
console.log(obj2)
    • 深拷贝:如果对象中的属性值又是一个引用数据类型,浅拷贝,还是把后面的引用数据类型的地址赋值给空对象的属性,深拷贝,将属性值一个个遍历赋值
//将其打包,方便以后使用
function extend(oldObj, newObj) {
for (var key in oldObj) {
var item = oldObj[key]
if (item instanceof Array) { // 数组
newObj[key] = []
extend(item, newObj[key])
} else if(item instanceof Object){ // 对象
newObj[key] = {}
extend(item, newObj[key])
}else { // 基本类型
newObj[key] = item
}
}
}
var obj = {
name: '昼猫',
age: '12',
ss: ['1', '2', '3'],
ssObj: {
sex: '男',
node: '昼猫笔记',
fun: function () {
console.log(111)
} }
}
var obj2 = {}
function extend(oldObj, newObj) {
for (var key in oldObj) {
var item = oldObj[key]
if (item instanceof Array) { // 数组
newObj[key] = []
extend(item, newObj[key])
} else if(item instanceof Object){ // 对象
newObj[key] = {}
extend(item, newObj[key])
}else { // 基本类型
newObj[key] = item
}
}
}
extend(obj, obj2);
console.log(obj2);

昼猫笔记 JavaScript -- 面向对象(I)的更多相关文章

  1. 昼猫笔记 JavaScript -- 作用域技巧!!

    简单理解 var zm = function (x) { var code = 'bb' return code }; 学过js的老哥们都知道,当这样简单的一个函数进入浏览器,浏览器开始解释代码,会将 ...

  2. 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行?

      本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种  setInterval()  . setTimeout()   setInterval() :按 ...

  3. 昼猫笔记 JavaScript -- 闭包

      本次主要内容是 闭包 阅读时间: 约 3分钟 记得点个赞支持支持我哦 初步了解 先看下代码,输出结果是多少? function fn1 () { var a = 2 function fn2 () ...

  4. 昼猫笔记 -- 面向对象(II) - 继承

    继承 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念. 所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现,还有就是js可以 ...

  5. 昼猫笔记 从此告别复杂代码--JavaScript

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 大家好,我是一只来自喵星的前端初学者,由于我们喵星人科技较为落后,昼猫从今天开始带着使命来到地球学习前端知识. 从今天开始,猫猫我就从Jav ...

  6. 昼猫笔记--什么是DOM

    昼猫笔记--给你带来不一样的笔记 不止是笔记 更多的是思考 Hello,大家好,昼猫,今天来加深下DOM 什么DOM呢?它的全称叫 Document Object Model 通过全称可以知道它是 文 ...

  7. 读书笔记-JavaScript面向对象编程(一)

    PDF下载链接: http://pan.baidu.com/s/1eSDSTVW 密码: 75jr 第1章 引言 1.1 回顾历史 1.2 变革之风 1.3 分析现状 1.4 展望未来 1.5 面向对 ...

  8. 读书笔记-JavaScript面向对象编程(三)

    第7章 浏览器环境 7.1 在HTML页面中引入JavaScript代码 7.2概述BOM与DOM(页面以外事物对象和当前页面对象) 7.3 BOM 7.3.1 window对象再探(所以JavaSc ...

  9. 读书笔记-JavaScript面向对象编程(二)

    第5章 原型 5.1 原型属性(所有函数拥有一个prototype属性,默认为空对象) 5.1.1 利用原型添加方法和属性 function Gadget(name,color){ this.name ...

随机推荐

  1. 深入C++ new/delete,malloc/free解析

    深入C++ new/delete,malloc/free解析 1.malloc与free是C++/C语言的标准库函数.new/delete是C++的运算符. 它们都可用于申请动态内存和释放内存 2.对 ...

  2. ios xcode真机调试获取屏幕截屏

    非常多时候我们须要在调试的过程中把手机屏幕截图发给其它人看,在android开发中我们能够非常方便的截图保存.而xcode开发ios的时候发现这个需求却如此困难.网上大部分都是介绍的以下这个方案.可是 ...

  3. C# Winform 模拟QQ新闻弹出框

    一开始做的时候,觉得这个太简单了.真心做的时候还是遇到了不少的坑啊. 1)循环播放新闻内容,建议使用showdialog(),不要用show(),不太好控制前后之间的停顿. 2)窗口的初始位置为有下角 ...

  4. Find or Query Data with C# Driver

    https://docs.mongodb.com/getting-started/csharp/query/ Overview You can use the Find and FindAsync m ...

  5. 智课雅思词汇---八、ject是什么意思

    智课雅思词汇---八.ject是什么意思 一.总结 一句话总结:词根:ject, jac(jet) = to throw(投掷, 扔) 1.geo是什么意思? 词根:-ge-, -geo- [词根含义 ...

  6. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  7. v2.0版本小程序开发心得(代码之外)

    总结一些代码之外的事情: 做优先该做的事情 分清主次,一天只有24小时,人的精力也是有限的,而且经常性的是,在某个时间爆发性的产生了大量的问题.这些问题集中的产生,需要一个一个的解决,但是人的精力是有 ...

  8. Test-我喜欢LInux

    测试发帖流程 哈哈 习惯一下先.

  9. mysql更改密码与远程管理

    set password = ': #在当前用户下更改密码 grant all privileges on *.* to root@"%" identified by " ...

  10. Linux 常用命令:系统状态篇

    前言 Linux常用命令中,有些命令可以用于查看系统的状态,通过了解系统当前的状态,能够帮助我们更好地维护系统或定位问题.本文就简单介绍一下这些命令. 1. 查看系统运行时间--uptime 有时候我 ...