CinseYoung

CinseYoung 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

CinseYoung 发布了文章 · 4月28日

js原型模式创建对象

我们先看一个正常的例子:

function Person() {
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function () {
alert(this.name);
};

let friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //true
alert(friend.constructor == Object); //true

可能有些代码洁癖者看到这么多重复的 Person.prototype 会有点受不了,那就简单地改写一下:

function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
    }
};

我们将 Person.prototype 设置为等于一个以对象字面量形式创建的新对象。
但是,问题来了:

var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false 
alert(friend.constructor == Object); //true

friendconstructor 不再指向 Person 了,查了一些资料发现:

在调用构造函数的时候,会为生成的新的实例对象添加一个指针指向构造函数的原型对象

那么在重写prototype的时候我们用对象字面量的方式创建了一个新的对象,而用这种方式创建就相当于调用了Object构造函数,写个例子看看:

    const o1 = {}
    const o2 = new Object()
    
    console.log(o1.__proto__ === o2.__proto__)    // true

知道了问题所在,那就在原来基础上手动指定 constructor 就好了:

Person.prototype = {
constructor : Person, // 在这里指定
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
    }
};
alert(friend.constructor == Person); //true 

大功告成!
但是....到这里还没结束。我们知道,调用构造函数时会为实例添加一个指向最初原型的[[Prototype]] 指针,而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。

function Person(){
}
var friend = new Person();
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
    }
};
friend.sayName(); // Uncaught TypeError: friend.sayName is not a function at <anonymous>`

这里就找不到原型对象上的sayName方法了!

image.png

在修改了构造函数的原型对象之后,即使给原型对象添加了constructor属性,但是之前通过构造函数生成的实例对象不会自动更新它们的原型对象的指针。
既然如此,那我们就在重写原型对象之后再生成Person的实例不就好了吗?
来看看

function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
    }
};
var friend = new Person();
friend.sayName(); // Nicholas (成功!)

image.png

OK ~~~~

查看原文

赞 0 收藏 0 评论 0

CinseYoung 关注了专栏 · 2019-11-12

Vue实验室

专注于Vue相关知识的学习和分享

关注 64

CinseYoung 关注了标签 · 2019-05-16

element-ui

Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

A Vue.js 2.0 UI Toolkit for Web

https://element.eleme.cn/
https://github.com/ElemeFE/el...

关注 655

CinseYoung 赞了文章 · 2018-09-04

20180308_vue-router前端权限控制问题

vue-router前端权限控制问题
前提纲要:
1.用户A和用户B有不同的权限。
页面分左侧菜单部分和右侧内容部分,右侧内容可能有不同路径的不同内容
最简单例子为点击左侧用户管理
右侧显示用户列表
点击某条内容详情
右侧显示某一用户的详细内容
2.用户A可以访问路径权限如下:

a/list
a/detail/:id
a/list/:id 

用户B可以访问路径权限如下:

b/list
b/detail/:id
b/list/:id

3.正常用户登陆进去可以看到自己的菜单,
点击菜单右侧内容部分发生变化,然后在右侧操作,更改页面url,左侧菜单不变,右侧内容页发生变化

碰到问题如下:
用户B登陆进去点击菜单进入b/detail/:id然后保存为书签(即保存该路径)退出
然后用户A登陆点击保存的标签页,正常获取左侧菜单权限,左侧菜单正常显示,但是右侧却根据url显示了自己权限外的b/detail/:id的内容(暂不考虑跟服务端交互问题,虽说服务端可以再掉用接口时给出无权限返回,前端再根据返回进行逻辑处理,但即便这样前端页面显示依旧不正常)

解决方案:
在路由进入之前,根据路由的meta属性的某一字段比对所有的可访问权限(这个在登录时已经获取了,可以存在localstorage里),如果能找到则进去否则跳转到某个固定页,这样就解决了权限问题

查看原文

赞 0 收藏 0 评论 0

CinseYoung 收藏了文章 · 2018-08-10

两栏布局,左边固定(200px),右边自适应

计算宽度cal

图片描述

使用float+BFC方法

图片描述
触发BFC,建议大家多去了解BFC,很多时候布局都会用到。

flex方案

图片描述

使用absolute+margin-left方法

图片描述

float+margin-left方案

图片描述

table方案

图片描述

查看原文

CinseYoung 关注了专栏 · 2018-07-31

vue学习之路

vue入门系列,基础讲解加实战操作

关注 47

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-07-31
个人主页被 83 人浏览