js-oop | 青训营笔记

72 阅读2分钟

OOP

以前使用对象,使用的是object literal => {}

现在有了构造函数constructor function,我们可以使用构造函数构建对象。

构造函数与普通函数的区别:

  • 我们使用new操作符调用构造函数。
  • 构造函数只能是函数声明或函数定义,不能是箭头函数,因为箭头函数没有自己的this关键字。

当我们使用new操作符触发一个函数时,发生了以下四步:

  1. 创建一个新的空对象{}
  2. 函数被调用,this指向设置为这个空对象 // this == {..}
  3. 这个空对象被链接到原型链上 {} linked to prototype(为对象设置__proto__属性并链接到被调用函数的prototype属性上)
  4. 函数会自动返回这个对象{...}

prototype

prototype property:

每个function都有一个名叫prototype的属性,故构造函数也有prototype属性。每一个通过这个构造函数创建出来的对象都会可以访问到所有定义在构造函数prototype属性上的的方法和属性。

prototype:

每个object都有一个名叫__proto__的属性(__proto__只是prototype而非prototype property

Person.prototype.constructor === Person  => true

index.js是最先被执行的文件

SPA: single page application(只有一个页面fetched from server)

JSX code: HTML in javascript code [但是可以被browser rendered]

function返回的东西最终会被转化成standard javascript

custom 自定义的HTML: 大写开头

传给component的参数会被打包成一个js object prop

在JSX中插入js代码: {...any javascript code you want...}

*onClick={cancelModal}:其实感觉像是click一下就执行一遍cancelModal函数

因为函数是一等公民,所以可以像传递值一样传递函数;

组件component也是可以像普通html一样被wrapped住的!

react可以做到为每一个component 定制一个只在它自己scope起作用的css file

react可以正常渲染一个数组 {[...]}


如何区分不同的数据类型js:

一、判断是不是数组???

const array = [1,2,3,4];

1、typeof 不行

typeof array => object
typeof {}	=> object
typeof null => object

2、 Array.isArray() 可以,但是是es5的方法,可能对于一些浏览器不兼容

3、Object.prototype.toString.call() 可以

Object.prototype.toString.call(array) === '[object Array]'

4、可以但有特殊情况(不同iframe)

array instanceof Array 或
array.constructor === Array

推荐写法,自己封装一个方法:

const isArray = (array) => {
	return Object.prototype.toString.call(array) === '[object Array]';
}
console.log(isArray(array));