微专业助教过程中一些比较有趣的问题

2017-09-04

问题1

var obj1 = {x:5};
var obj2 = obj1;
obj1.a = obj1 = {x:6};
console.log(obj1.a);//undefined
console.log(obj2.a);//{x:6}

需要明确两点：
1.连等是先确定所有变量的指针，再让指针指向赋值。
2.属性访问器优先级高于=

上面的过程是：
1.找到obj1.a及obj1的指针。如果有，不改变，如果没有，进行创建，初始化为undefined
2.把找到的指针指向最右的赋值

问题2

图片不规则裁剪问题。
大作业里面有一个头像长这样

有同学问怎么制作，正好最近用laya引擎做游戏，UI里也涉及到图片的裁剪，laya给出的办法是新增一个sprite组件，改类型为mask，mask中再新建图形，这样就可以保留相交的部分。

由于引擎2D部分本身是由canvas实现的，顺便看了下源码，发现了globalCompositeOperation这个东西（不好意思之前没怎么接触过canvas…所以只能用发现了）。

文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Compositing

globalCompositeOperation部分属性值

属性值	意义
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只会显示目标图像之外源图像部分，目标图像是透明的。
destination-over	在源图像上方显示目标图像。
destination-atop	在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。
destination-in	在源图像中显示目标图像。只有源图像内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
source-over	使用异或操作对源图像与目标图像进行组合。

Demo

var canvas = document.createElement('canvas');
document.getElementsByTagName('body')[0].append(canvas)
canvas.width = 1000;
canvas.height = 1000;
var context = canvas.getContext('2d');

var imgArr = [];
var avatar = new Image();
avatar.src = 'avatar.jpg';
var shape = new Image();
shape.src = 'shape.png';


avatar.onload = function(){
    context.drawImage(avatar, 0, 0, 100, 100);
    shape.onload = function(){
        context.globalCompositeOperation="destination-in";
        context.drawImage(shape, 0, 0, 50, 50);
    }
}

问题3

见实例共享原型的属性，为什么直接对属性赋值，不会改变其他实例上的该属性值？